Angularjs - ng-route 在 IE9 上不起作用 - 不显示视图答案

【问题标题】：Angularjs - ng-route not working on IE9 - the views are not displayedAngularjs - ng-route 在 IE9 上不起作用 - 不显示视图
【发布时间】：2014-12-20 02:14:33
【问题描述】：

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

我对 IE9 的兼容性有疑问（强制要求，我的办公室默认使用）。在 Chrome 和 Firefox 中都可以运行，我不知道为什么该应用程序在 IE9 上无法运行。

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

我正在使用 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>

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

非常感谢您的帮助。

【问题讨论】：

为什么将其标记为“ColdFusion”？
文件 appService.js 包含允许通过 cfc 文件从数据库中检索数据的函数
您是否尝试过从标记中的链接中删除#？
是的，但它不再适用于所有浏览器

标签： javascript html angularjs coldfusion

【解决方案1】：

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

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

有了这个标签，现在一切都可以在 IE9 中完美运行了。

【讨论】：

非常感谢！！你是男人！在我的整个应用程序在 IE9 中无法运行后，我汗流浃背。
什么？！ Errr，谢谢...用 IE11 完美地解决了我的 Angular 路由问题，但到底是什么？！嗯……我们开发人员更喜欢使用 Chrome 是有原因的…… ;-)

【解决方案2】：

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

【讨论】：

我也遇到过这个问题... console.log 和 IE！
哇，谢谢。这行得通！这是我遇到过的最奇怪的问题。

【解决方案3】：

这可能是在黑暗中拍摄的，但我以前见过它发生过..

尝试移动

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

到body标签而不是html标签

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

【讨论】：

您好，非常感谢您的回复。尽管如此，我已经尝试过了，但问题仍然存在于 IE9 上。在 IE10 和 IE11 上，一切正常。
嗨（再次 ;-) ）在兼容模式 IE9 下无法重现 plunkr 中的错误你可以用你的网络浏览器试试吗？
您好，我在浏览器 IE9 上进行了测试，当我单击您的链接“plunkr”时，会出现一个弹出窗口并显示“xdomain (plnkr.co): requires 'JSON' and this browser does not support它。”该网站显示，但没有出现，没有代码。此消息以前从未显示过。我将在 IE 10 和 IE11 的兼容模式下进行测试。