个人中心
gpt4 book ai didi

javascript - Angularjs - ng-route 在 IE9 上不工作 - 不显示 View

转载 作者：太空狗 更新时间：2023-10-29 16:51:31 26 4
gpt4 key购买 nike

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

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

当您单击顶部菜单中的按钮时，不会显示 View (为了显示所有联系人或带有用于添加联系人的表单的 View )。我认为这是“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( 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

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

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

非常感谢您的帮助。

最佳答案

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

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

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

关于javascript - Angularjs - ng-route 在 IE9 上不工作 - 不显示 View ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26140575/

26 4 0
文章推荐： c - OpenCL 用户定义的内联函数
文章推荐： javascript - Angular 2 : What is the best way to get a reference of a template element
文章推荐： angular - 如何在 Angular2 中正确使用依赖注入(inject)(DI)？
文章推荐： php - 更新表时跟踪选择和取消选择选项
太空狗
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com