我正在尝试使用ui-router在角度中使用嵌套状态创建一个基本布局系统.
我想要的是,任何"子状态"都可以覆盖'layout'顶级状态的部分,以便根据站点的区域使用不同的站点布局.
给定以下system/server/views/index.html:
<section data-ui-view="layout" ></section>以及两个可以互换的布局:system/public/views/layouts/standard.html:
<div class="navbar navbar-inverse navbar-fixed-top" data-ui-view="header" data-role="navigation"></div>
<section class="container-fluid">
<section data-ui-view ></section>
</section>系统/公/视图/布局/全width.html:
<div class="navbar navbar-inverse navbar-fixed-top" data-ui-view="header" data-role="navigation"></div>
<section class="container">
<section data-ui-view ></section>
</section>样本内容系统/ public/views/index.html
<div>some sample content</div>最后是路由器:
function($stateProvider, $urlRouterProvider) {
// For unmatched routes:
$urlRouterProvider.otherwise('/');
// states for my app
$stateProvider
.state('root', {
url: '/',
abstract: true,
views: {
'layout@': {
templateUrl: 'system/views/layouts/standard.html'
},
'header@root': {
templateUrl: 'system/views/partials/header.html'
}
}
})
.state('root.home', {
url: '',
views: { …