1000字范文,内容丰富有趣,学习的好帮手!
1000字范文 > angular兼容性问题的解决(ie6 ie7.... 火狐 谷歌 360 等亲测兼容)

angular兼容性问题的解决(ie6 ie7.... 火狐 谷歌 360 等亲测兼容)

时间:2020-03-14 17:54:01

相关推荐

angular兼容性问题的解决(ie6 ie7.... 火狐 谷歌 360 等亲测兼容)

在使用angular包的时候,会遇到一些兼容性问题,下面的代码是一个解决了兼容性问题的一段代码。

代码如下:

<!--[if lte IE 8]> <!DOCTYPE html><![endif]--><html id="ng-app" class="ng-app:TestApp" ng-app="TestApp"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/><title>ANGULAR TEST</title><style>fieldset {border: black solid 1px;}.a{font-size:9pt;}.sky{background-color:#99ccff; }</style><script src="/fs/scripts/angular.min.v125.js"></script></head><body ng-controller="TestCtrl"><h2 style="color:#009933;font-family:Arial">TESTTD</h2><table cellpadding=1 cellspacing=2 style="width:600px;font-family:Arial" class="a"><tr><td style="width:300px">ETB ID</th><td style="width:300px">{{Test == null ? "---" : Test[0].TESTAAA}}</td></tr><tr><td>Train Topography Counter</th><td>{{Test == null ? "---" : Test[0].TESTBBB}}</td></tr></table><br /><fieldset><legend style="color: #009933;font-size:22px;font-family:Arial">List</legend><table cellpadding=1 cellspacing=2 style="width:890px;font-family:Arial" class="a"><tr align="left" class="r5" style="background:#009933;color:#fff"><th style="width:370px">UUID</th><th style="width:150px">Orientation</th><th style="width:130px">Number</th><th style="width:240px">Counter</th></tr><tr align="left" ng-if="Test != null" ng-repeat="entry in Test" ng-class="{'sky' : entry.TESTCCC == 'true'}"><td>{{entry.UUID}}</td><td>{{entry.orientation}}</td><td>{{entry.number}}</td><td>{{entry.counter}}</td></tr></table></fieldset><script language="JavaScript">function ANGULAR(httpobj,scopeobj){httpobj({method:'get',//添加时间是为了每次从浏览器读取时间使浏览器自己清除缓存url:'/cgi/json/Test.php?temptime=' + (new Date()).getTime(),timeout:2000,headers:{'Content-Type':undefined},}).success(function(data) {scopeobj.Test = data.Testdatas;}).error(function() {scopeobj.Test = null;}); }angular.module('TestApp', []).controller('TestCtrl', function($scope, $http){document.title = 'Test';$scope.title = 'Test';ANGULAR($http,$scope);setInterval(function() {ANGULAR($http,$scope);}, 2500);});</script></body></html>

下面几个重点部分注意一下:

1.<!--[if lte IE 8]> <!DOCTYPE html><![endif]-->

2.<html id="ng-app" class="ng-app:TestApp" ng-app="TestApp">

3.<script src="/fs/scripts/angular.min.v125.js"></script>

这个js包的版本可以去网上找一下应该有,我会将这个包上传的到CSDN。

angular.min.v125.rar(亲测可用)-Javascript代码类资源-CSDN下载

4.<body ng-controller="TestCtrl">

ng-controller标识了控制范围。

5.<td style="width:300px">{{Test == null ? "---" : Test[0].TESTAAA}}</td>

显示部分,由于传过来的数据是存放在json数组中,所以去了Test【0】。

6. <tr align="left" ng-if="Test != null" ng-repeat="entry in Test" ng-class="{'sky' : entry.TESTCCC == 'true'}">

<td>{{entry.UUID}}</td>

这部分的ng-repeat是用来迭代的,ng-class用于用返回来的数据控制显示的css。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。