Angular UI 路由器子状态不适用于 IE [英] Angular UI router sub states not working on IE
问题描述
正如我在我的另一个问题中所说的，我正在 AngularJS 中使用 NodeJS、Express 和 Angular-UI-Router 创建一个 web 应用程序.
As I said in my other question, I'm creating a webapp in AngularJS with NodeJS, Express and Angular-UI-Router.
起初我根本无法加载页面(我设法解决了这个问题)，现在的问题是 Angular-UI-Router 似乎无法进入嵌套状态.
At first I couldn't get the page to load at all (I managed to solve that problem), now the issue is that Angular-UI-Router doesn't seem to be able to go to nested states.
请注意这仅在 Internet Explorer 上出现问题.该网站在 Chrome 和 Firefox 上完美运行.我使用的是 Internet Explorer 11.
Note that this is a problem only on Internet Explorer. The website works perfectly on Chrome and Firefox. I'm using Internet Explorer 11.
常规"状态工作正常，但我无法访问嵌套状态(虽然它不会引发任何错误)
"Regular" states work fine, but I can't access nested states (it doesn't throw any error though)
可能是因为我使用 HTML5 无哈希 URL 吗?
May it be because I use HTML5 no-hash URLs?
这是我的索引:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<!-- Angular Material CSS now available via Google CDN; version 1.0.7 used here -->
<link rel="stylesheet" href="./modules/angular-material/angular-material.min.css"/>
<link rel="stylesheet" href="./css/style.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
<link rel="icon" href="icons/favicon.ico" type="image/x-icon"/>
<base href="/"/>
<title>Area Clienti</title>
<script src="./modules/angular/angular.js" type="text/javascript"></script>
<script src="./modules/ngstorage/ngStorage.js" type="text/javascript"></script>
<script src="./modules/angular-aria/angular-aria.min.js" type="text/javascript"></script>
<script src="./modules/angular-animate/angular-animate.min.js" type="text/javascript"></script>
<script src="./modules/angular-material/angular-material.min.js" type="text/javascript"></script>
<script src="./modules/angular-ui-router/release/angular-ui-router.min.js" type="text/javascript"></script>
<script src="./modules/ui-router-extras/release/modular/ct-ui-router-extras.core.min.js" type="text/javascript"></script>
<script src="./modules/ui-router-extras/release/modular/ct-ui-router-extras.dsr.min.js" type="text/javascript"></script>
<script src="./modules/ui-router-extras/release/modular/ct-ui-router-extras.sticky.min.js" type="text/javascript"></script>
<script src="./modules/pdfmake/build/pdfmake.min.js" type="text/javascript"></script>
<script src="./modules/pdfmake/build/vfs_fonts.js" type="text/javascript"></script>
<script src="./modules/angular-messages/angular-messages.min.js" type="text/javascript"></script>
<script src="http://ngmaterial.assets.s3.amazonaws.com/svg-assets-cache.js" type="text/javascript"></script>
<script src="./js/client.js" type="text/javascript"></script>
</head>
<body ng-app="App" ng-controller="AppCtrl" ng-view ui-view ng-cloak layout="row">
</body>
</html>
这是 ui-router 状态的 js 配置:
This is the js config for ui-router states:
app.config(function($locationProvider, $mdThemingProvider, $mdIconProvider,$stateProvider, $urlRouterProvider, $stickyStateProvider) {
$locationProvider.html5Mode(true);
$mdThemingProvider
.theme('default')
.primaryPalette('blue')
.accentPalette('light-blue');
$urlRouterProvider.otherwise('/login');
//$stickyStateProvider.enableDebug(true);
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'views/login.html',
controller:'loginController',
authenticate: false
})
.state('dashboard', {
url: '/',
templateUrl: 'views/dashboard.html',
controller:'dashboardController',
authenticate: true,
sticky:true,
dsr:true
})
.state('dashboard.rating', {
url:'rating',
templateUrl: 'views/rating.html',
controller: 'ratingController',
authenticate: true,
abstract:true
})
.state('dashboard.rating.search', {
url:'/search',
views: {
'top': {
templateUrl: 'views/rating-search.html'
},
'content':{
templateUrl:'views/rating-search-result.html'
}
},
authenticate: true
})
.state('dashboard.rating.view', {
url:'/view',
views: {
'top': {
template: ''
},
'content':{
templateUrl:'views/rating-view.html'
}
},
authenticate: true
})
.state('dashboard.infocamere', {
url:'infocamere',
templateUrl: 'views/in-costruzione.html',
authenticate: true
})
.state('dashboard.pratiche', {
url:'pratiche',
templateUrl: 'views/in-costruzione.html',
authenticate: true
});
})
推荐答案
在元标记中添加这个
<meta http-equiv="X-UA-Compatible" content="IE=edge">
这可以被认为等同于 HTML5 doc-type，它要求浏览器以从 IE 11 到 IE 6 的最受支持的模式在文档中运行 Edge 是 IE 中最受支持的文档模式
This can be considered equivalent to HTML5 doc-type which asks the browser to run in the doc in most supported mode from IE 11 to IE 6 Edge is the most supported document mode in IE
关于这个的更多信息可以阅读这个线程https://github.com/google/web-starter-kit/issues/728
For more information about this one can read this thread https://github.com/google/web-starter-kit/issues/728
这篇关于Angular UI 路由器子状态不适用于 IE的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
