这会导致页面的页眉、页脚和内容块填充content.list
视图吗?
$stateProvider
.state('contacts', {
abstract: true,
url: '/contacts',
views: {
header: { templateUrl: 'admin/header.html'},
content: {
templateUrl: 'contacts.html',
controller: function($scope){
$scope.contacts = [{ id:0, name: "Alice" }, { id:1, name: "Bob" }];
}
},
footer: { templateUrl: 'admin/footer.html'}
}
})
.state('contacts.list', {
url: '/list',
templateUrl: 'contacts.list.html'
})
<!-- index.html -->
...
<div ui-view="header"></div>
<div ui-view="content"></div>
<div ui-view="footer"></div>
...
<!-- contacts.html -->
<h1>Contacts Page</h1>
<div ui-view></div>
<!-- contacts.list.html -->
<ul>
<li ng-repeat="person in contacts">
<a ng-href="#/contacts/{{person.id}}">{{person.name}}</a>
</li>
</ul>
是的,这会起作用。有一个正在工作的plunker。
父视图的$scope
(在状态"contacts"视图中定义为"content"的视图)及其范围将是原型继承的来源。
这意味着,它的属性将在子状态"contacts.list"中可用,因为它被注入到"内容"视图中
还有更多关于它的详细信息:
如何在angularjs-ui路由器中的状态之间共享$scope数据
为了证明这一点,我们可以用列表控制器扩展上面的代码片段,并注入更多的联系人
...
.state('contacts.list', {
url: '/list',
templateUrl: 'contacts.list.html',
controller: 'listCtrl', // new controller
})
}
])
// we get already initiated contacts... coming from parent view
.controller('listCtrl', ['$scope', function($scope) {
$scope.contacts
.push({ id: 2, name: "from a child" });
}])
在此处检查