在 ui-router 中将子模板插入到抽象父模板中

Question

我正在尝试将一些子状态的模板插入到标记为抽象的父状态中。

在以下示例中，content.state1 和 content.state2 的模板应插入到 <div class="content" ng-view></div> 中，后者包含在其父状态 content 的模板中。

myapp.config(function($stateProvider){
$stateProvider
    .state('content', {
        abstract: true,
        // Other states should insert their content here
        template: '<div class="content" ng-view></div>'
    })
    .state('content.state1', {
        url: "/state1",
        template: '<h1>Hello from state1!</h1>',
        onEnter: function() { console.log('entering state1'); }
    })
    .state('content.state2', {
        url: "/state2",
        template: '<h1>Hello from state2!</h1>',
        onEnter: function() { console.log('entering state2'); }
    })
});

完整示例： http://plnkr.co/edit/EAB3BfYsZc6bTwxm2XuO?p=preview

我不明白为什么这不起作用。

Answer 1

重点是使用ui-view，而不是ng-view

//template: '<div class="content" ng-view></div>'
template: '<div class="content" ui-view></div>'

根相同，index.html

// <div ng-view=""></div>
<div ui-view=""></div>

这里是the updated plunker

在 ui-router 中将子模板插入到抽象父模板中

Insert child template into template of abstract parent in ui-router

angularjs

angular-ui

angular-ui-router