UI-路由器未编译深层模板

Question

我在使用 UI-Router 构建嵌套模板时遇到问题。似乎无法在第三层（或更深层次）加载或编译模板。

我创建了一个带有简化示例的 plunker，这是代码：

angular.module('plunker', ["ui.router"])
.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
    $urlRouterProvider.otherwise("/");
    $locationProvider.html5Mode(false).hashPrefix('!');
    $stateProvider
    .state('home', {
        url: "/",
        controller: 'MainCtrl',
        views: {
            'main': {
                template: 'Main content'
             },
            'secondary': {
                templateUrl: "view2.html",
                views: {
                    'hot': {
                         template: 'hot content'
                     },
                     'cold': {
                         template: 'cold content'
                     }
                 }
            }
         }
    })

})
.controller('MainCtrl', function($scope) {
    $scope.sayHello = 'Hello';
})

其中 html 是

<body class='container' ng-controller='MainCtrl'>
    <h2>Nested template proof</h2>
    <div ui-view>
        <p>{{sayHello}}</p>
        <div ui-view="main"></div>
        <div ui-view="secondary"></div>
    </div>
</body>

并且 view2.html 是

<div>
    <p>view2 loaded</p>
    <div ui-view="hot"></div>
    <div ui-view="cold"></div>
</div>

任何人都可以告诉我我做错了什么吗？ 'hot' 和 'cold' 部分未被编译。

Answer 1

有一个updated and working example

在一个状态中嵌套视图必须以不同的方式进行。我们需要绝对命名——所以这将是语法：

.state('home', {
    url: "/",
    controller: 'MainCtrl',
    views: {
        'main': {
            template: 'Main content'
         },
        'secondary': {
            templateUrl: "view2.html",
            //views: {}
        },
        'hot@home': {
             template: 'hot content'
         },
         'cold@home': {
             template: 'cold content'
         }
     }
})

这是 absolute view naming，讨论如这里：

Angular UI Router - Nested States with multiple layouts
Angularjs ui-router not reaching child controller

UI-路由器未编译深层模板

UI-Router is not compiling deep levels of templates

templates

nested

angularjs

angular-ui-router