Question

我是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>

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

非常感谢您的帮助。

Answer 1

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

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

使用此标签，所有功能现在都可以在IE9中完美运行。

Answer 2

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

Answer 3

这可能是在黑暗中拍摄但我已经看到它发生在......之前。

尝试移动

纳克应用内=＆＃34; ContactsApp＆＃34;类=＆＃34; NG-应用程式：ContactsApp＆＃34; ID =＆＃34; NG-应用＆＃34;

到body标签而不是html标签

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

Angularjs - ng-route不能在IE9上运行 - 不显示视图

3 个答案: