为什么这条路线不起作用？如何强制此代码工作？如何在angular-ui-router中实现布局工作？请帮助解决此问题。
$stateProvider
.state( 'layout', {
abstract: true,
url: '',
views: {
'layout': { templateUrl: 'template/layout.html' },
'header': {
templateUrl: 'template/header.html',
controller: 'HeaderController'
},
'sidebar': { templateUrl: 'template/sidebar.template.html' }
}
} )
.state( 'layout.home', {
url: '/',
views: {
'[email protected]': { templateUrl: 'template/main.html' }
}
}
);
layout.html
<main class="layout">
<div ui-view="header"></div>
<div class="main">
<div class="container">
<div class="row">
<div class="col-md-9">
<div class="content">
<div ui-view="main"></div>
</div>
</div>
<div class="col-md-3">
<div ui-view="sidebar"></div>
</div>
</div>
</div>
</div>
</main>
index.html
<div ui-view="layout"></div>
这应该工作
.state( 'layout', {
abstract: true,
url: '',
views: {
'layout': { templateUrl: 'template/layout.html' },
'header': {
templateUrl: 'template/header.html',
controller: 'HeaderController'
},
//'sidebar': { templateUrl: 'template/sidebar.template.html' }
'sidebar@layout': { templateUrl: 'template/sidebar.template.html' }
}
} )
.state( 'layout.home', {
url: '/',
views: {
//'[email protected]': { templateUrl: 'template/main.html' }
'main': { templateUrl: 'template/main.html' }
}
}
父州“布局”-现在'sidebar@layout'使用绝对命名定位-在“ template / layout.html”内部查找模板
子视图仅使用父目标“ main”，因此我们不需要绝对命名。如果我们愿意，那就只是
'main@layout': { templateUrl: 'template/main.html' }
因为我们定位了父级的“布局”目标 ui-view="main"
可以在此处找到工作示例（还有更多详细信息）
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句