angular.js，IE7,8,9兼容性的处理

zoukankan html css js c++ java

angular.js，IE7,8,9兼容性的处理
转...........

这段时间详细了解了谷歌新出的MVVM框架angular.js，并直接在本人所从事的项目中使用了。但是使用新东西都是有风险的，这不，采用了新框架的页面IE7,8各种显示不出来……心想着难道用以前的办法重来？不能允许！于是上网查阅了大量资料。终于跑通了，并且知道是怎么回事。

以下面这个IE7,8,9都跑得通的例子说明,重点是红字的部分：

<!DOCTYPE html>

<html>

<head>

<script src=”app/js/json2.js”></script>

<script src=”app/lib/angular/angular.js”></script>

<script src=”demo.js”></script>

</head>

<body ng-app id=”ng-app” class=”ng-cloak”>

<div ng-controller=”InvoiceCntl”>

<b>Invoice:</b>

<br>

<br>

<table>

<tr><td>Quantity</td><td>Cost</td></tr>

<tr>

<td><input type=”integer” min=”0″ ng-model=”qty” required ></td>

<td><input type=”number” ng-model=”cost” required ></td>

</tr>

</table>

<hr>

<b>Total:</b> {{qty * cost | currency}}

</div>

</body>

</html>

要让IE7这个渣渣happy,你必须加上json2.js或者其他json文件（IE7没有原生的支持）。然后，你还需要在申明ng-app脚本的地方特意加上id=”ng-app”,这样IE7才能识别（因为IE7不支持自建元素）。如此IE7就能跑通了。IE7跑的通，IE8，IE9也没有问题。

官网上有一个教程例子：phonecat，想必各位想用angular.js的同志都看了。但是作为官网的例子，这货居然不能在IE7,8下转。用本人的方法稍微修改一下phonecat的index.html，就也能跑了：

<!DOCTYPE html>

<html lang=”en” >

<head>

<meta charset=”utf-8″>

<!–[if lt IE 9]>

<script src=”http://www.AngularJS.cn/wp-content/themes/angularjs/js/HTML5.js” type=”text/JavaScript”></script>

<![endif]–>

<title>Google Phone Gallery</title>

<link rel=”stylesheet” href=”css/app.css”>

<link rel=”stylesheet” href=”css/bootstrap.css”>

<script src=”js/json2.js”></script>

<script src=”lib/angular/angular.js”></script>

<script src=”js/app.js”></script>

<script src=”js/controllers.js”></script>

<script src=”js/filters.js”></script>

<script src=”js/services.js”></script>

<script src=”lib/angular/angular-resource.js”></script>

</head>

<body ng-app=”phonecat” id=”ng-app”>

<div ng-view></div>

</body>

</html>

此外，官网上提到两点：

1.如果我们需要使用老派风格的directive语法”ng:”，那么我们需要加入一个xml-namespace到html标签中以“取悦”IE。（这个是一个历史原因，我们也不推荐使用ng:）

<html xmlns:ng=”http://angularjs.org”>

对于采用标准写法的脚本（一切都是以ng-开始而不是ng:开始）就不需要这行内容了。

2.如果你按照angularjs的规则创建了很多自定义标签，那么每个自定义标签，对于IE7,8都必须自己写js 声明创建了这些标签。就像这样：

<!–[if lte IE 8]>

<script>

document.createElement(‘ng-include’);

document.createElement(‘ng-pluralize’);

document.createElement(‘ng-view’);

</script>

<![endif]–>

总而言之，使用了angular.js，就仿佛看到了当初W3C标准化组织对web的远景规划：用XML替代html一样。各种操作声明、自定义标签将使DOM操作和应用逻辑解耦，它能大大改善代码的可调性。Angular信奉的是，当组建视图(UI)同时又要写软件逻辑时，声明式的代码会比命令式的代码好得多。

转载自：http://www.storagelab.org.cn/zhangdi/2013/01/08/angular-js%EF%BC%8Cie789%E5%85%BC%E5%AE%B9%E6%80%A7%E7%9A%84%E5%A4%84%E7%90%86/

原文地址：https://docs.angularjs.org/guide/ie

注：AngularJS1.3已经不支持IE8（包括IE8）以下的浏览器。更多信息请查看我们的Blog 。AngularJS 1.2将继续支持IE8，但核心团队不会花时间去解决IE8或更早的IE浏览器问题。

本文是介绍针对IE浏览器的特征来处理HTML属性和标签。如果你想在IE8或者更早的浏览器的应用中使用AngularJS的话，这篇文章非常适合你。

该项目目前支持IE9+了，并会修复相应的BUG。持续集成服务器在IE9，IE10，和IE11运行所有的测试请看 Travis CI 和 ci.angularjs.org 。

我们没有在IE8及以下浏览器上测试。用AngularJS功能的子集可以工作在这些浏览器，但它是由你来测试和决定是否适用于您的特定的APP。

简单版本

为了能让您的AngularJS应用能正常运行在IE上，请确保如下：

1，你需要为IE7及以下浏览器添加JSON.stringify方法。可以使用 JSON2 或 JSON3 。
```
<!doctype html>
<html xmlns:ng="http://angularjs.org">
<head>

</head>
<body>
...
</body>
</html>
```
2，给根元素添加id=”ng-app”属性与ng-app属性结合起来。
```
<!doctype html>
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="optionalModuleName">
...
</html
```
3，不要使用自定义元素标签，比如<ng:view>，使用<div ng-view>来取代。

4，如果你想使用自定义元素标签，你必须在IE8及以下浏览器中添加下面的代码：
```
<!doctype html>
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="optionalModuleName">
<head>
    
</head>
<body>
...
</body>
</html>
```
5，使用ng-style标签来取代style=”{{someCSS}}”。后者能运行在chrome和Firefox，但在IE11及以下浏览器中无法运行（写作时的最新版本）。

最重要的部分：
- xmlns:ng-命名空间-你需要为你所有计划要使用的常见标签创建命名空间。
- document.createElement(yourTagName) -创建自定义的标签名称-因为这个问题只在IE老版本浏览器中存在，所以你只需要有条件的加载它。对于那些不支持命名空间和自定义HTML标签的浏览器，你需要预处理来让它在IE中正常的运行。
长版本

IE中不支持非标准标签的问题，可以分为两种，每种都有相应的解决办法

如果标签名以my:前缀开头，它会被认为是一个XML命名空间，所以必须在<html xmlns:my=”ignored”>进行相应的命名空间声明。

如果标签没有：，但它不是一个标准的HTML标签，那么它必须使用document.createElement(‘my-tag’)预先创建。

如果你计划在自定义标签中使用CSS选择器，那么无论哪个xml命名空间，你必须使用 document . createElement ( ‘my-tag’ ) 来预创建标签

好消息

好消息是，这些限制只适用于元素标记名称，而不是元素的属性名称。因此 <div my-tag your:tag ></div> 在IE中是不需要进行特殊处理的。

如果我不这样做，会发生什么？

如果你的HTML有未知的标签mytag(可能是my:tag或者my-tag类似的)
```
<html>
    <body>
        <mytag>some text</mytag>
    </body>
</html>
```
它被解析成下面的DOM结构：
```
#document
  +- HTML
     +- BODY
        +- mytag
           +-#text: some text
```
我们想要的是BODY元素下有一个子元素mytag，mytag里面包含some text文本。但在IE中不会解析成上面的样子（如果没有进行上面的修复的行为的话）
```
#document
	+- HTML
	  +- BODY
		  +- mytag
		  +-#text: some text
		  +-/mytag
```
在IE中，body元素中有三个子元素：

1，自闭标签。比如自闭标签<br/>，标签中/是可选的，但<br>标签不允许有子元素，所以浏览器会认为是三个兄弟元素，而不是把some text作为<br>的子元素。

2，作为some text的文本节点。应该作为mytag的子元素，而不是兄弟元素。

3，损坏的自闭合标签/mytag。它是不规范的，因为元素名称不允许有/字符。此外，该自闭合标签不应该成为DOM的一部分，因为它仅用于绘制DOM的结构。

自定义标签中的CSS样式

为了能使CSS选择器能在自定义元素中工作，无论在XML命名空间，你必须使用 document . createElement ( ‘my-tag’ ) 来预创建自定义标签名
```
<html xmlns:ng="needed for ng: namespace">
<head>
	
<style>
ng:view {
	display: block;
	border:1px solid red;
}
ng-include {
	display: block;
	border:1px solid blue;
}
</style>
</head>
<body>
<ng:view></ng:view>
<ng-include></ng-include>
...
</body>
</html>
```
查看全文

相关阅读:
VS2015, .NET 4.6, C# 6.0, F# 4.0等重量级产品正式上线
 Visual Studio 2015正式发布
 持续集成并不能消除 Bug，而是让它们非常容易发现和改正（转）
如何用Excel直接查询Oracle中的数据（转）
HTTP必知必会（转）
二叉树的友好实现(转)
TortoiseGit push失败原因小结（转）
Android
对JAVA Bean使用PropertyDescriptor反射调用JAVA方法
 关于MSHTML

原文地址：https://www.cnblogs.com/cx709452428/p/6548932.html

angular.js，IE7,8,9兼容性的处理

简单版本

长版本

好消息

如果我不这样做，会发生什么？

自定义标签中的CSS样式