angular.js,IE7,8,9兼容性的处理
来源:互联网 发布:对比两组数据的差异性 编辑:程序博客网 时间:2024/05/16 14:01
这段时间详细了解了谷歌新出的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)同时又要写软件逻辑时,声明式的代码会比命令式的代码好得多。
- angular.js,IE7,8,9兼容性的处理
- angular.js,IE7,8,9兼容性的处理
- IE7,8,9兼容性处理
- IE7的CSS兼容性
- IE7,6与Fireofx的兼容性处理方法
- IE7,6与Fireofx的CSS兼容性处理方法大全
- IE7 beta2的CSS兼容性
- IE7和IE8的兼容性
- js日期对象兼容性的处理
- JS浏览器兼容性处理
- 低版本的IE7和IE8对overflow: hidden;的兼容性处理办法
- IE6 IE7 IE8 FF 兼容性的写法
- IE6与IE7兼容性的资料
- 优化js中的兼容性处理
- 浏览器IE6、IE7、IE8、css bug兼容性处理
- JS在IE和FF下的兼容性处理
- 各种兼容性的处理
- JS的浏览器兼容性
- c++第6次实验
- PTA 求前缀表达式的值 (25分)
- springmvc+quartz,实现定时任务
- Effective cpp 读书笔记7
- Vickate_iOS_如何获取手机及应用的信息
- angular.js,IE7,8,9兼容性的处理
- 一个实体对象不能由多个 IEntityChangeTracker 实例引用之Nop
- 16-05-20 javac 不是内部或外部命令
- 【JVM】HotSpot JVM内存管理和GC策略总结
- iOS开发之集成ijkplayer视频直播
- 安卓隐藏导航栏
- C++第6次上机实验
- JAVA学习之——HashMap实现原理
- 数据结构的实现细节