Angularjs - NG-路线不工作的IE9 - 不显示视图 [英] Angularjs - ng-route not working on IE9 - the views are not displayed
本文介绍了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 - 不显示视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
