Router子状态无法在IE上运行

Router子状态无法在IE上运行

本文介绍了Angular UI Router子状态无法在IE上运行的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

正如我在我的其他问题中所说的那样,我正在使用NodeJS,Express和Angular-UI-Router在AngularJS中创建一个Webapp.

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无哈希网址吗?

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路由器状态的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的最受支持模式在doc中运行.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 Router子状态无法在IE上运行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-25 23:58