Angularjs - ng-route가 IE9에서 작동하지 않습니다. -보기가 표시되지 않습니다.

저는 Angularjs의 초보자입니다. 이 프레임 워크를 사용하여 응용 프로그램을 개발하고 데이터베이스에서 데이터를 검색하기 위해 Coldfusion을 개발할 것입니다.Angularjs - ng-route가 IE9에서 작동하지 않습니다. -보기가 표시되지 않습니다.

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

당신이 날이 문제를 해결하는 데 도움이 시겠어요?

도움을 주셔서 미리 감사드립니다.

출처

2014-10-01 coeurdange57

왜이 태그가 'ColdFusion'입니까? –

appService.js 파일에는 cfc 파일 덕분에 데이터베이스에서 데이터를 검색 할 수있는 기능이 포함되어 있습니다. – coeurdange57

태그의 링크에서 #을 삭제하려고 시도 했습니까? – Fordio

위해 고정 몸에 태그를 이동, 비슷한 문제를 가지고 왜 모르는 body 태그가 아닌 HTML 태그에

나는 페이지의 "머리"부분에 다음과 같은 "메타"태그를 추가하여 해결책을 발견 :이 태그와

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

, 모든 일을 지금 완벽하게 IE9에서.

출처

2014-10-09 06:41:48 coeurdange57

정말 고마워요 !! 너는 남자 야! 내 전체 애플 리케이션 IE9에서 일하고 wasnt 후 나는 땀을 흘리고 있었다. –

무엇?! Errr, 고마워요. IE11에서 제 각도 라우팅 문제를 아름답게 수정했지만 그게 뭐지?! 흠 ... 거기에 우리 개발자가 Chrome을 선호하는 이유가 있습니다. ;-) –

이 어둠 속에서 샷을 할 수 있지만, 나는 그것이 전에 일어날 보았다 ..

하는

NG-응용 프로그램 = "ContactsApp"클래스 = "NG-응용 프로그램 : ContactsApp"이동보십시오 ID를 = " NG-응용 프로그램 "

내가 이런 일이 발생하지만 난 나를

출처

2014-10-01 17:34:18 proxim0

안녕하세요, 답장을 보내 주셔서 감사합니다. 그럼에도 불구하고 나는 이것을 시험해 보았고 문제는 여전히 IE9에있다. IE10과 IE11에서는 모두 작동합니다. 호환 모드 IE9 와 (다시 ;-)) – coeurdange57

안녕 가 [plunkr]에서 버그를 재현 할 수는 (http://plnkr.co/edit/kRvDVE4x29Zfg9NTPXcZ?p=preview) 당신은 당신의 웹 브라우저를 시도 할 수 있습니다 ? –

안녕하세요, 저는 브라우저 IE9에서 테스트했으며 "plunkr"링크를 클릭하면 "xdomain (http://plnkr.co) : JSON이 필요합니다.이 브라우저는 지원하지 않습니다."라는 메시지가 나타납니다. 웹 사이트가 표시되지만 코드는 표시되지 않습니다. 이전에이 메시지가 표시되지 않았습니다. 호환성 모드로 IE 10 및 IE 11에서 테스트 할 것입니다. – coeurdange57

IE 9에서 빈 페이지가있는 것과 같은 문제가 발생했습니다. 크롬에서 FF와 IE 10 및 11 라우팅이 제대로 작동하고 내 응용 프로그램의 첫 페이지 인 로그인 페이지가 나타납니다. 메타 태그를 시도했지만 문제가 해결되지 않았습니다. 나 또한 body 태그로 ng-app를 옮겨 보았습니다. 아직도 그것을 고치지 않았다. IE 개발자 도구를 열었을 때 갑자기 작동하고 로그인 페이지가 나타 났던 또 다른 이상한 일이있었습니다. 추가 검색을 한 결과 자바 스크립트에서 console.log를 사용하면 IE에서 문제가 발생할 수 있다는 것을 알았습니다. 일단 모든 콘솔을 제거했습니다.JS 파일에서 로그를 불러오고, 메타 태그를 추가하고, ng-app를 body 태그로 옮겼습니다. 라우팅은 IE 9에서 표준 및 호환 모드로 작동했습니다.

출처

2014-12-19 18:14:33 umchee

이 문제도있었습니다 ... ** console.log ** 및 IE! – rfornal

와우, 고마워. 이것은 효과가있다! 이것은 내가 이제까지 만난 이상한 문제이다. –

Angularjs - ng-route가 IE9에서 작동하지 않습니다. -보기가 표시되지 않습니다.

답변

관련 문제