AngularJS-ng-route在IE9上不起作用-视图未显示
韩朝斑
问题内容：
问题答案：
我是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>
您能帮我解决这个问题吗？
在此先感谢您的帮助。
问题答案：
我通过在页面的“ head”部分添加以下“ meta”标签找到了解决方案：
<meta http-equiv="X-UA-Compatible" content="IE=edge">
使用此标签，所有内容现在都可以在IE9中完美运行。
类似资料：
-
问题内容： 我尝试使用AngularJS进行简单的选择下拉列表 这是我的代码： 格式如下： 选择下拉列表出现，但没有任何选择值，我在做什么错？ 问题答案： 我相信您缺少ngModel指令，并且以错误的方式调用ng-options指令。 我在这里工作的地方做了个小矮人。
-
问题内容： 我正在尝试将AngularJS用于我的第一个项目（锦标赛经理），并且筛选器不起作用:(我已阅读了有关该文档的所有文档，但无济于事：/ 所以，我在上面定义了vars ： 现在，在我看来，我正在尝试重新排序（首先只有一个订单项），但是再也无法工作… 第二次，我要重新排序，从2条信息：和如果第一是平等的。我尝试更换这样的，但如果一个代码没有工作，他绝不会与2工作… 谢谢大家的阅读，对于帖子的
-
问题内容： 我有一个像这样的控制器： 当我尝试使用ng-click调用upload_variant_image函数时，它仅在绑定到静态DOM时才有效（当DOM加载时），我有这样的链接： 但是此元素是在DOM加载后动态添加的，因此ng-click不起作用。 但是当我在Rails中像这样更新DOM时，它不起作用： 问题答案： 我警告您，如果您通过Angular外部方法来操纵DOM，则可能不会完全接受A
-
问题内容： 我正在尝试通过使用angular将背景图像应用于div （我之前尝试过使用具有相同行为的自定义指令），但是它似乎没有用。 不过，如果我尝试使用背景色，则效果似乎很好。我也尝试了远程源和本地源，但都没有用。 问题答案： 正确的语法是： ng-style的正确语法是：
-
问题内容： 这是显示问题的小提琴。http://jsfiddle.net/Erk4V/1/ 如果我在ng-if内部有一个ng-model，就会出现该模型无法正常工作的情况。 我想知道这是一个错误还是误解了正确的用法。 问题答案： 与其他指令一样，该指令将创建子范围。请参见下面的脚本（或此jsfiddle） 因此，您的复选框将更改子作用域的内部，而不更改外部父作用域。 请注意，如果要修改父作用域中的
-
我有一种字体在IE8和IE9以及所有其他浏览器中都能正常工作，但第二种字体只在IE9和其他浏览器中工作。在IE8中,我得到了一个错误： “CSS3111:@font-face遇到未知错误。” 我一直在四处看书，尝试了很多事情，但都没有运气。 我的代码是： 我试过用几个不同的生成器多次重新生成eot，玩过CSS，玩过头，玩过域，等等，但是看起来它们都很好。如前所述，相同的代码在相同的，只是指向不同的