我想构建一个具有以下结构header-view,main-view,footer-view的站点.
所以我定义了一个根路由,其中包含标题&页脚. root的孩子将成为我的所有站点.在这些站点中,我将拥有更多嵌套视图.
所以我定义了一个根路由,其中包含标题&页脚. root的孩子将成为我的所有站点.在这些站点中,我将拥有更多嵌套视图.
在下面的代码中它确实显示了标题,但没有显示页脚和&主要观点.一旦我删除了父继承,它就会显示主视图,但不会显示标题和&页脚.
HTML
<body ng-app="App">
<header ui-view="header"></header>
<main ui-view></ui-view>
<footer ui-view="footer"></footer>
</body>
JS
module.config(function($urlRouterProvider,$stateProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('root',{
abstract: true,views: {
'@': {
controller: 'RootCtrl',controllerAs: 'rootCtrl'
},'header@': {
templateUrl: 'modules/header/header.html',controller: 'HeaderCtrl',controllerAs: 'headerCtrl'
},'footer@': {
templateUrl: 'modules/footer/footer.html',controller: 'FooterCtrl',controllerAs: 'footerCtrl'
}
}
})
.state('root.home',{
parent:'root',url:'',templateUrl:'modules/home/home.html',controller: 'HomeController',controllerAs:'homeCtrl'
});
});
有链接到
working plunker.
原文链接：https://www.f2er.com/angularjs/143659.htmlUI-Router逻辑如何为视图查找目标/锚点：始终尝试将子项插入父项.如果不可能,则使用绝对命名.看到：
View Names – Relative vs. Absolute Names
所以我改变的是,父母未命名的视图现在包含一个孩子的目标/锚 – 未命名的视图< ui-view />：
.state('root',{
abstract: true,views: {
'@': {
template: '<ui-view />',// NEW line,with a target for a child
controller: 'RootCtrl',controllerAs: 'rootCtrl'
},....
另外,因为我们说,默认网址是
$urlRouterProvider.otherwise('/home');
我们必须有这样的状态：
.state('root.home',{
parent:'root',url:'/home',// this is the otherwise,to have something on a start up
检查它here
使用plunker here的另一种方法可能是针对孩子的根视图：
.state('root.home',views: {
'@': {
templateUrl:'home.html',controllerAs:'homeCtrl'
}
},
在这种情况下,父状态不必具有< ui-view /> – 我们以root为目标,但我们不会继承任何东西……为什么？看到这个链接：
