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>'

对于root，index.html

也是如此

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

这是the updated plunker

将子模板插入到ui路由器中的抽象父模板中

1 个答案: