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

太过爱你忘了你带给我的痛 2022-05-22 01:45 319阅读 0赞

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

代码如下：

<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.

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

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

这个js包的版本可以去网上找一下应该有，我会将这个包上传的到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。