本文介绍了Angularjs - NG-路线不工作的IE9 - 不显示视图的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我和Angularjs初学者。我要开发这个框架和ColdFusion从数据库中检索数据的应用程序。

I'm a beginner with Angularjs. I'm going to develop an application with this framework and Coldfusion for retrieving data from the database.

我有对IE9(强制性的,在我的办公室使用的默认情况下)的兼容性问题。在Chrome和Firefox的所有作品,我不知道为什么应用程序不能在IE9工作。

I have a problem with the compatibility on IE9 (mandatory and used by default in my office). All works in Chrome and Firefox, and I do not know why the application does not work on IE9.

当您在顶部菜单点击按钮(以显示所有联系人或形式foradding联系人视图)视图不显示。我认为这是与NG-路线的依赖问题,但我不知道。

The view is not shown when you click on the button in the top menu (in order to display all contacts or the view with the form foradding a contact). I think that it's a problem with the "ng-route" dependency, but I'm not sure.

我使用的版本AngularJS v1.2.23和依赖NG-路线(角route.min.js)。

I'm using the version AngularJS v1.2.23 and the dependency "ng-route" (angular-route.min.js).

我在这里的code


  • index.html的

  • 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(控制器)

  • app.js (controller)

    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

  • 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(视图)

  • allContacts.html (view)

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


  • 能否请你帮我解决这个问题?

    Could you please help me to solve this problem?

    提前感谢您的帮助。

    推荐答案

    我已经在页面的头部分加入以下元标签找到了解决办法:

    I have found the solution by adding the following "meta" tag in the "head" part of the page:

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

    通过这个标签,现在都完全在IE9。

    With this tag, all works now perfectly in IE9.

    这篇关于Angularjs - NG-路线不工作的IE9 - 不显示视图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

    08-27 13:36