I want to build a site with the following structure header-view, main-view, footer-view . So I defined a root route which contains the header & footer. Children of root will be all my sites.Within these sites I will have more nested views.
我想构建一个具有以下结构header-view,main-view,footer-view的站点。所以我定义了一个包含页眉和页脚的根路由。 root的孩子将成为我的所有站点。在这些站点中,我将拥有更多嵌套视图。
In the code below it does show the header, but not the footer & the main view. As soon as I remove the parent inheritance, it shows the main view but not the header & the footer.
在下面的代码中,它确实显示标题,但不显示页脚和主视图。一旦删除父继承,它就会显示主视图,但不会显示页眉和页脚。
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'
});
});
1 个解决方案
#1
10
There is a link to working plunker.
有工作的plunker链接。
The UI-Router logic how to find a target/anchor for a view is: always try insert child into parent. If not possible, then use absolute naming. see:
UI-Router逻辑如何为视图查找目标/锚点:始终尝试将子项插入父项。如果不可能,则使用绝对命名。看到:
View Names - Relative vs. Absolute Names
So what I changed, is, that the parent unnamed view is now containing a target/anchor for a child - unnamed view <ui-view />:
所以我改变的是,父的未命名视图现在包含一个子目标/锚点 - 未命名视图
.state('root', {
abstract: true,
views: {
'@': {
template: '<ui-view />', // NEW line, with a target for a child
controller: 'RootCtrl',
controllerAs: 'rootCtrl'
},
....
Also, because we say, that the default url is
另外,因为我们说,默认网址是
$urlRouterProvider.otherwise('/home');
we have to have such state:
我们必须有这样的状态:
.state('root.home',{
parent:'root',
url:'/home', // this is the otherwise, to have something on a start up
Check it here
在这里查看
Another approach with a plunker here, could be to target the root view in the child:
另一种在这里使用plunker的方法可能是针对孩子的根视图:
.state('root.home',{
parent:'root',
url:'/home',
views: {
'@': {
templateUrl:'home.html',
controller: 'HomeController',
controllerAs:'homeCtrl'
}
},
In this case, the parent state does not have to have <ui-view /> - we target root, but we won't be inheriting anything... Why is that? See this link:
在这种情况下,父状态不必具有
Scope Inheritance by View Hierarchy Only
#1
10
There is a link to working plunker.
有工作的plunker链接。
The UI-Router logic how to find a target/anchor for a view is: always try insert child into parent. If not possible, then use absolute naming. see:
UI-Router逻辑如何为视图查找目标/锚点:始终尝试将子项插入父项。如果不可能,则使用绝对命名。看到:
View Names - Relative vs. Absolute Names
So what I changed, is, that the parent unnamed view is now containing a target/anchor for a child - unnamed view <ui-view />:
所以我改变的是,父的未命名视图现在包含一个子目标/锚点 - 未命名视图
.state('root', {
abstract: true,
views: {
'@': {
template: '<ui-view />', // NEW line, with a target for a child
controller: 'RootCtrl',
controllerAs: 'rootCtrl'
},
....
Also, because we say, that the default url is
另外,因为我们说,默认网址是
$urlRouterProvider.otherwise('/home');
we have to have such state:
我们必须有这样的状态:
.state('root.home',{
parent:'root',
url:'/home', // this is the otherwise, to have something on a start up
Check it here
在这里查看
Another approach with a plunker here, could be to target the root view in the child:
另一种在这里使用plunker的方法可能是针对孩子的根视图:
.state('root.home',{
parent:'root',
url:'/home',
views: {
'@': {
templateUrl:'home.html',
controller: 'HomeController',
controllerAs:'homeCtrl'
}
},
In this case, the parent state does not have to have <ui-view /> - we target root, but we won't be inheriting anything... Why is that? See this link:
在这种情况下,父状态不必具有