【问题标题】:Angular UI router sub states not working on IEAngular UI 路由器子状态不适用于 IE
【发布时间】:2017-06-24 08:54:51
【问题描述】:

正如我在my other question 中所说,我正在使用 NodeJS、Express 和 Angular-UI-Router 在 AngularJS 中创建一个 webapp。

起初我根本无法加载页面(我设法解决了这个问题),现在问题是 Angular-UI-Router 似乎无法进入嵌套状态。

请注意,这只是 Internet Explorer 上的问题。该网站在 Chrome 和 Firefox 上完美运行。我使用的是 Internet Explorer 11。

“常规”状态工作正常,但我无法访问嵌套状态(虽然它不会引发任何错误)

可能是因为我使用 HTML5 无哈希 URL?

这是我的索引:

<!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 配置:

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
            });
    })

【问题讨论】:

  • 尝试在头部添加这个
  • @VinodLouis 我不敢相信这是这么简单的事情哈哈。有效!愿意将其发布为答案(也许可以解释它的作用以及解决问题的原因)?所以我可以把它标记为答案:)

标签: javascript angularjs node.js angular-ui-router angular-material


【解决方案1】:

在元标记中添加这个

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

这可以被认为等同于 HTML5 doc-type,它要求浏览器以 IE 11 到 IE 6 最受支持的模式在 doc 中运行 Edge 是 IE 中最受支持的文档模式

关于这个的更多信息可以阅读这个帖子https://github.com/google/web-starter-kit/issues/728

【讨论】:

  • 我注意到一个问题:这只有在我在 Edge 模式下使用 IE11 时才有效,如果我在开发者控制台中选择 IE10 或以前的版本,子状态会再次中断。有没有办法让它在 IE8、9 和 10 上运行?
  • Doctype 是否在索引页上定义?尝试用 8,9,10 替换边缘
  • 是的,DOCTYPE 已定义,我尝试将其替换为 8、9、10 和 EmulateIE10,但没有帮助
  • 是路由问题还是其他你也经历过这个docs.angularjs.org/guide/ie
  • 是的,我已经完成了那篇文章中描述的步骤。我认为这可能是一个路由问题,因为这两个基本状态(仪表板和登录)工作但不是嵌套状态,但奇怪的是它只发生在 IE 上。不过,这可能完全是 Angular 的问题,因为我的 Angular Material 输入文本框即使在 Edge 模式下也不起作用。
猜你喜欢
  • 1970-01-01
  • 2019-01-09
  • 2016-08-19
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-11-11
  • 1970-01-01
  • 2016-10-28
相关资源
最近更新 更多