0

正如我在my other question中所說的,我使用NodeJS,Express和Angular-UI-Router在AngularJS中創建了一個webapp。Angular UI路由器子狀態不能在IE上工作

起初我根本無法加載頁面(我設法解決這個問題),現在的問題是Angular-UI-Router似乎無法進入嵌套狀態。

請注意,這只是在Internet Explorer上的一個問題。該網站在Chrome和Firefox上完美運行。我使用Internet Explorer 11

「常規」狀態做工精細,但我不能訪問嵌套的狀態(不投雖然任何錯誤)

但願這是因爲我使用HTML5 NO-哈希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的路由器狀態的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 
      }); 
    }) 
+0

嘗試在頭部添加此

+0

@ VinodLouis我無法相信這是一件簡單的事情。有效!謹慎發佈它作爲答案(也許解釋它做什麼,爲什麼它解決了這個問題)?所以我可以將它標記爲答案:) – Hankrecords

回答

1

在meta標籤添加這個

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

這可以被認爲是相當於HTML5 doc-type,要求瀏覽器以最受支持的模式從IE 11到IE 6 Edge在文檔中運行,它是最受支持的文檔在IE

ument模式有關此一個的詳細信息可以讀取該線程https://github.com/google/web-starter-kit/issues/728

+0

我注意到一個問題,但只有在邊緣模式下使用IE11時,如果我在開發人員控制檯中選擇IE10或以前的版本,則子狀態會再次中斷。有沒有辦法使它在IE8,9和10上工作? – Hankrecords

+0

是否在索引頁上定義了Doctype?嘗試更換邊緣8,9,10 –

+0

是的,DOCTYPE被定義,我試圖用8,9,10和EmulateIE10替換它,但它並沒有幫助 – Hankrecords