UI-маршрутизатор не работает с материальной конструкцией облегченной

пытаюсь использовать материал-дизайн-Lite с UI-маршрутизатором, но мои шаблоны никогда не оказываются в поле зренияUI-маршрутизатор не работает с материальной конструкцией облегченной

<html lang="en" ng-app="admin"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="chrome=1"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="fragment" content="!"> 
    <base href="/"> 
    <title ng-bind="state.data.title"></title> 

    <link rel="stylesheet" type="text/css" href="libs/material-design-lite/material.min.css"> 
    <link rel="stylesheet" type="text/css" href="src/css/app.css"> 
</head> 
<body> 
    <div class="app-layout mdl-layout mdl-layout--fixed-drawer mdl-layout--fixed-header"> 
     <app-header></app-header> 

     <app-sidebar></app-sidebar> 

     <main class="mdl-layout__content mdl-color--grey-100 page"> 
      <section ui-view></section> 
     </main> 
    </div> 

    <script> 
     //Global Variables 
    </script> 

    <script src="libs/material-design-lite/material.min.js"></script> 
    <script src="libs/angular/angular.min.js"></script> 
    <script src="libs/angular-ui-router/release/angular-ui-router.min.js"></script> 
    <script src="src/js/modules/angular-mdl.js"></script> 

    <script src="src/js/app.js"></script> 
    <script src="src/js/app.routes.js"></script> 

    <script src="src/js/controllers/main.js"></script> 
    <script src="src/js/controllers/dashboard.js"></script> 
    <!-- Directives --> 
    <script src="src/js/directives/header.js"></script> 
    <script src="src/js/directives/sidebar.js"></script> 
</body> 
</html>

app.routers.js файл

//App Routes 
angular.module('admin'). 
config(['$stateProvider', '$urlRouterProvider','$locationProvider', 
    function($stateProvider, $urlRouterProvider, $locationProvider) { 
     $locationProvider.html5Mode(true).hashPrefix('!'); 
     $urlRouterProvider.otherwise('/dashboard'); 

     $stateProvider.state('app',{ 
      abstract: true, 
      url: '', 
      controller: 'MainController' 
     }) 
     .state('app.dashboard', { 
      url: '/dashboard', 
      data: { 
       'title': "Admin - Dashboard" 
      }, 
      templateUrl: '/tpls/dashboard.html', 
      controller: 'DashboardController' 
     }) 
    } 
]);

источник

2016-04-08 MrFoh

Можете ли вы настроить обработчик ошибок и посмотреть, возникли ли какие-либо ошибки? https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#issue-im-getting-a-blank-screen-and-there-are-no-errors –

Добавить template: "<ui-view />" в свой 'приложение' объекта государства конфигурации

https://github.com/angular-ui/ui-router/wiki/Nested-States-&-Nested-Views#abstract-states

Помните: абстрактные состояния все еще нуждаются в их собственных <ui-view/> для их детей, чтобы подключиться. Поэтому, если вы используете абстрактное состояние только для добавления URL-адреса, установки разрешений/данных или выполнения функции onEnter/Exit, вам также потребуется установить template: "<ui-view/>".

источник

2016-04-08 15:22:27

$rootScope.$on('$stateChangeSuccess', function() { 
    $timeout(function() { 
    componentHandler.upgradeAllRegistered(); 
    }); 
});

Я обнаружил, что ui-router не очень хорошо работает с material design lite в моем проекте, и в исходном коде material, я нашел Window объект componentHandler, который имеет функцию upgradeAllRegistered, эта функция должна работать. Итак, я назвал его после stateChangeSuccess, и он просто сработал.

источник

2016-08-30 14:32:49

Этот ответ явно стоит немного пояснить, как он решает проблему OP ... –

Хотя этот код может помочь решить проблему, он не объясняет _why_ и/или _how_, он отвечает на вопрос. Предоставление этого дополнительного контекста значительно улучшит его долгосрочную образовательную ценность. Пожалуйста, отредактируйте свой ответ, чтобы добавить объяснение, включая ограничения и допущения. –

UI-маршрутизатор не работает с материальной конструкцией облегченной

ответ

Смежные вопросы