Angularjs-ng路由在IE9上不起作用-视图不显示

Angularjs - ng-route not working on IE9 - the views are not displayed

本文关键字：视图 显示 不起作用 路由 IE9 Angularjs-ng      更新时间：2023-09-26

我是Angularjs的初学者。我将使用这个框架和Coldfusion开发一个应用程序，用于从数据库中检索数据。

我在IE9上的兼容性有问题（在我的办公室里是强制性的，默认使用）。所有这些都可以在Chrome和Firefox中运行，我不知道为什么该应用程序不能在IE9上运行。

当您单击顶部菜单中的按钮时，该视图不会显示（以显示所有联系人或带有添加联系人表单的视图）。我认为这是"ng路由"依赖性的问题，但我不确定。

我使用的是AngularJS v1.2.23版本和依赖项"ng-route"（angular route.min.js）。

这里是我的代码：

  • index.html

    <html ng-app="ContactsApp" class="ng-app:ContactsApp" id="ng-app">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Expires" content="0">
        <title>Application</title> 
        <link rel="stylesheet" href="lib/css/bootstrap-3.1.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="lib/css/bootstrap-3.1.1/css/bootstrap-theme.min.css">
        <link rel="stylesheet" href="css/styles.css" rel="stylesheet">
        <link rel="stylesheet" href="css/select.css" rel="stylesheet">     
    </head>  
    <body>
        <div class="container">
            <div class="spacer navbar">
                <h1 class="nav nav-pills navbar-left">Application</h1>
                <ul class="nav nav-pills navbar-right" data-ng-controller="NavbarController">
                    <li data-ng-class="{'active':getClass('/all-contacts')}"><a href="#/all-contacts">All contacts</a></li>
                    <li data-ng-class="{'active':getClass('/add-contacts')}"><a href="#/add-contacts">Add contacts</a></li>
                </ul>
            </div>        
            <div ng-view></div>
            <hr/>
            <div class="footer">
                <p>@Copy right 2014</p>
            </div>
      </div>
      <script src="lib/js/angular.min.js"></script>
      <script src="lib/js/bootstrap.min.js"></script>
      <script src="lib/js/jquery.min.js"></script>
      <script src="lib/js/angular-route.min.js"></script>              
      <script src="lib/js/ng-infinite-scroll.min.js"></script>              
      <script src="lib/js/ui-bootstrap-tpls-0.11.0.min.js"></script>          
      <script src="app/app.js"></script>
      <script src="app/appService.js"></script>                
    </body>
</html>

  • app.js（控制器）

    var app=angular.module('ContactsApp', ['ngRoute', 'ui.bootstrap']);    
app.config(function($routeProvider){
    $routeProvider.when('/all-contacts',
    {
      templateUrl: 'template/allContacts.html',
      controller: 'ctrlContacts'        
    })
    .when('/view-contacts/:contactId',
    {
      templateUrl: 'template/viewContact.html',
      controller: 'ctrlViewContacts'
    })
    .when('/search-contacts',
    {
      templateUrl: 'template/fastSearch.html',
      controller: 'ctrlContactSearch'
    })  
    .when('/add-contacts',
    {
      templateUrl: 'template/manageContact.html',
      controller: 'ctrlAddContacts'
    }) 
    .otherwise({redirectTo:'/all-contacts'});  
});    
app.controller('ctrlContacts', function ($scope, ContactService){
    $scope.contacts=null;
    $scope.search = function(searchText) {
        if (searchText.length>2) {
            ContactService.fastSearch(searchText).success(function(contacts){
                $scope.contacts = contacts; 
            }); 
        }else{
            $scope.contacts=null;
        }
    }   
    // recherche   
    $scope.searchText = null;
    $scope.razRecherche = function() {
        $scope.searchText = null;
    }   
    // tri   
    $scope.champTri = null;
    $scope.triDescendant = false;
    $scope.triEmails = function(champ) {
        if ($scope.champTri == champ) {
            $scope.triDescendant = !$scope.triDescendant;
        } else {
            $scope.champTri = champ;
            $scope.triDescendant = false;
        }   
    }
    $scope.cssChevronsTri = function(champ) {
        return {
            glyphicon: $scope.champTri == champ,
            'glyphicon-chevron-up' : $scope.champTri == champ && !$scope.triDescendant,
            'glyphicon-chevron-down' : $scope.champTri == champ && $scope.triDescendant 
        };
    }
    $scope.confirmDel = function (id) {
        if(confirm('Do you want to delete this contact?')){
            ContactService.delContact(id).success(function(){
                ContactService.getContact().success(function(contacts){
                    $scope.contacts = contacts; 
                });             
            });
        }
        $scope.orderby = orderby;
    };
    $scope.setOrder = function (orderby) {
        if(orderby === $scope.orderby){
            $scope.reverse = !$scope.reverse;
        }
        $scope.orderby = orderby;
    };
});
app.controller('NavbarController', function($scope, $location){
    $scope.getClass=function(path){
        if($location.path().substr(0,path.length) == path){
            return true;
        }else{
            return false;
        }
    }
});
...

  • appService.js

        app.factory('ContactService', function($http){
        var factory={};
        factory.getContact=function(id){
            return $http.get('http://dev.remede.eurostat.cec/amadese/AngularVersion/contacts.cfc?method=getContacts&subsString=' + id);
        };
        factory.loadPersonById=function(id){
            return $http.get('http://dev.remede.eurostat.cec/amadese/AngularVersion/contacts.cfc?method=loadPersonById&idPerson=' + id);
        };  
        factory.loadCategory=function(id){
            return $http.get('http://dev.remede.eurostat.cec/amadese/AngularVersion/categories.cfc?method=loadCategory&typeContact=' + id);
        };  
        factory.getCountry=function(id){
            return $http.get('http://dev.remede.eurostat.cec/amadese/AngularVersion/countries.cfc?method=getCountries&countryid=' + id);
        };
        factory.fastSearch=function(string){
            if (string){
                chaine='http://dev.remede.eurostat.cec/amadese/AngularVersion/contacts.cfc?method=fastSearch&subsString=' + string;     
            }else{
                chaine='';      
            }
            //alert(chaine);
            return $http.get(chaine);
        };
        factory.addNewPerson=function(objContact){
            //alert(objContact);
            return $http.get('http://dev.remede.eurostat.cec/amadese/AngularVersion/contacts.cfc?method=addNewPerson&jsStruct=' + JSON.stringify(objContact))
        };  
        return factory;
    })

  • allContacts.html（查看）

    <h4>View all contacts</h4>
<table ng-show="contacts.length"  class="table table-striped table-hover spacer">
    <thead>
        <tr>
            <th class="colPerson">
                <a ng-click="triEmails('PERSON')">Person</a>
                <span class="hSpacer" ng-class="cssChevronsTri('PERSON')"></span>
            </th>
            <th class="colCompany">
                <a ng-click="triEmails('COMPANY')">Company</a>
                <span class="hSpacer" ng-class="cssChevronsTri('COMPANY')"></span>
            </th>
            <th class="colDate">
                <a ng-click="triEmails('REQUESTTRUEDATE')">Date</a>
                <span class="hSpacer" ng-class="cssChevronsTri('REQUESTTRUEDATE')"></span>
            </th>
            <th class="colDescription">
                <a ng-click="triEmails('REQUESTDESCRIPTION')">Description</a>
                <span class="hSpacer" ng-class="cssChevronsTri('REQUESTDESCRIPTION')"></span>
            </th>
            <th class="colAction">Action</th>
        </tr>
      </thead>       
      <tbody>     
        <tr ng-repeat="contact in contacts | filter:searchText | orderBy:champTri:triDescendant" class="clickable">
        <td><a href="#/view-contacts/{{contact.ID}}">{{contact.PERSON}}</a></td>
        <td>{{contact.COMPANY}}</td>
        <td>{{contact.REQUESTTRUEDATE}}</td>
        <td>{{contact.REQUESTDESCRIPTION}}</td>     
        <td style="min-width100px;">
        <a href="#/edit-contacts/{{contact.ID}}" class="inline btn btn-primary"><span class="glyphicon glyphicon-pencil"></span></a> 
        <button class="inline btn btn-default" data-ng-click="confirmDelPerson(contact.ID)">
            <span class="glyphicon glyphicon-remove"></span>
        </button>        
        </td>
        </tr>
      </tbody> 
    </table>
    <div ng-show="busy">Loading data...</div>
  </div>

你能帮我解决这个问题吗？

非常感谢您的帮助。

我通过在页面的"head"部分添加以下"meta"标签找到了解决方案：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

有了这个标签，所有功能现在都可以在IE9中完美运行。

我遇到了同样的问题，我在IE 9中得到了一个空白页面。在chrome中，FF和IE 10和11路由运行良好，我的应用程序的第一个页面，即登录页面，就会出现。我尝试了元标签，但它没有解决问题。我还试着将ng应用程序移到身体标签上。还有一件奇怪的事情是，当我打开IE开发者工具时，它突然可以工作了，我的登录页面就会出现。我做了一些额外的搜索，发现在JavaScript中的任何地方使用console.log都会导致IE出现问题。一旦我删除了JS文件中的所有console.log调用，添加了meta标签，并将ng应用程序移动到body标签，路由就可以在IE 9上以标准和兼容模式工作。

这可能是在黑暗中拍摄的，但我以前见过这种情况。。

尝试移动

ng app="ContactsApp"class="ng app:ContactsApp"id="ng app"

到body标签而不是html标签

我不知道为什么会发生这种情况，但我也遇到过类似的问题，将标签移动到主体为我修复了

相关文章：