0

Как я уже говорил в my other question, я создаю webapp в AngularJS с NodeJS, Express и Angular-UI-Router.Углеродные пользовательские интерфейсы UU не работают на IE

Поначалу я не мог загрузить страницу вообще (мне удалось решить эту проблему), теперь проблема в том, что 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> 

Это JS конфигурации для Ui-маршрутизатор состояний:

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 http-equiv="X-UA-Compatible" content="IE=edge"> 

Это можно считать эквивалент HTML5 doc-type, который запрашивает браузер для запуска в документе в большинстве поддерживаемых режимов от IE 11 до IE 6 Edge является наиболее поддерживаемым документом ument режим в IE

Для получения дополнительной информации об этом можно прочитать эту нить https://github.com/google/web-starter-kit/issues/728

+0

Я заметил проблему: это работает только в том случае, если я использую IE11 в режиме Edge, если я выбираю IE10 или предыдущие версии в консоли разработчика, суб-состояния снова ломаются. Есть ли способ заставить его работать на IE8, 9 и 10? – Hankrecords

+0

Определен ли Doctype на индексной странице? попробуйте заменить край на 8,9,10 –

+0

Да, определяется DOCTYPE, я попытался заменить его 8, 9, 10 и EmulateIE10, но это не помогло – Hankrecords