[英]Angular UI router nested views
我有这样的结构:
<div ui-view="main">
<!-- content populated here by AngularJS ui-router -->
<aside ui-view="sidebar">
<!-- content populated here by AngularJS ui-router -->
</aside>
</div>
我希望能够像下面那样在主状态中定义模板,而不必在子状态下管理它。
.state('state1', {
url: '/',
views: {
'main': {
templateUrl: '/modules/blog/partials/index.html',
controller: 'BlogController'
},
'sidebar': {
templateUrl: '/modules/core/partials/sidebar.html'
}
}
});
我希望名为sidebar
的ui-view不是main
的子状态,而是由main
状态的views对象填充,而不是由子状态的templateUrl字段填充。 我怎样才能做到这一点?
我们可以在一个州内使用更多视图,请参阅:
定义只需要使用绝对命名:
.state('state1', {
url: '/',
views: {
'main': {
templateUrl: '/modules/blog/partials/index.html',
controller: 'BlogController'
},
// instead of
// 'sidebar': {
// we need
'sidebar@state1': {
templateUrl: '/modules/core/partials/sidebar.html'
}
}
});
正如这里详细解释的那样:
在幕后,为每个视图分配一个绝对名称,该名称遵循
viewname@statename
的方案,其中viewname是视图指令中使用的名称,状态名称是状态的绝对名称,例如contact.item。 您还可以选择以绝对语法编写视图名称。
所以,正如上面的代码片段所示,如果是内容的话
/modules/blog/partials/index.html
将会:
<div>
<!-- content populated here by AngularJS ui-router -->
<aside ui-view="sidebar">
<!-- content populated here by AngularJS ui-router -->
</aside>
</div>
并且index.html将包含占位符:
<div ui-view="main" ></div>
那么
'main'
- 将在父根(index.html)中搜索 'sidebar@state1'
将在'state1'(本身)中被评估为viewName / target 一个类似的想法和一些layout.html背后的例子 ......
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.