Angularjs UI路由器未编译深层模板_Angularjs_Templates_Nested_Angular Ui Router

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

angularjs templates

Angularjs UI路由器未编译深层模板,angularjs,templates,nested,angular-ui-router,Angularjs,Templates,Nested,Angular Ui Router,我在使用UI路由器构建嵌套模板时遇到问题。它似乎无法加载或编译第三级（或更深层）的模板我创建了一个简化的示例，代码如下： angular.module('plunker', ["ui.router"]) .config(function($stateProvider, $urlRouterProvider, $locationProvider) { $urlRouterProvider.otherwise("/"); $locationProvider.html5Mode(fa

我在使用UI路由器构建嵌套模板时遇到问题。它似乎无法加载或编译第三级（或更深层）的模板

我创建了一个简化的示例，代码如下：

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>


嵌套模板证明
{{sayHello}}

而view2.html是

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


视图2已加载

谁能告诉我我做错了什么？“热”和“冷”部分没有被编译。

有一个

在一个状态中嵌套视图的方式必须有所不同。我们需要绝对命名-因此语法如下：

.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'
         }
     }
})

这是绝对视图命名
，例如在这里讨论：

非常感谢，尽管这意味着在更复杂的场景中，如果不确切知道模板包含的内容，并且不在父上下文中解压其内容，我就无法将带有子模板的模板添加到视图中。这对我的眼睛不好看。我们可以做很多。这些链接显示了有关布局的一些想法。希望能有帮助。享受强大的用户界面路由器