Question

我试图将材料设计精简版用于ui-router，但我的模板永远不会渲染到视图中

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

Answer 1

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

我发现ui-router在我的项目中与material design lite不兼容，在material的源代码中，我找到了Window个对象{{1它有一个函数componentHandler，这个函数应该有效。所以，我在upgradeAllRegistered之后调用它，它只是起作用。

Answer 2

将template: "<ui-view />"添加到“app”状态的配置对象

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

请记住：抽象状态仍然需要他们自己的<ui-view/>才能让孩子插入。因此，如果您使用抽象状态只是为了添加url，设置resolve / data或运行onEnter / Exit函数，那么您还需要设置template: "<ui-view/>"。

ui-router不使用材料设计精简版

2 个答案: