角UI路由器：家长和放大器;子视图 [英] Angular ui-router : Parent & Child Views
问题描述
我想建立具有下列结构标题视图，主视图，页脚视图站点。
所以我定义它包含了头和放根路线;页脚。根的孩子将是我所有的sites.Within这些网站我将有更多的嵌套视图。
在code下面它只报头，而不是在页脚＆放大器;主视图。当我删除了父继承，这显示了主要的看法，但没有头和放大器;页脚。
HTML
＆LT;机身NG-应用=应用程序＆GT;
＆LT;头UI视图=头＆GT;＆LT; /头＆GT;
＆lt;主UI的视图＆gt;＆LT; / UI的视图＆gt;
＆LT;页脚UI视图=页脚＆GT;＆LT; /页脚＆GT;
＆LT; /身体GT;
JS
module.config（函数（$ urlRouterProvider，$ stateProvider）{
$ urlRouterProvider.otherwise（'/家）;
$ stateProvider
.STATE（'根'，{
摘要：真实，
观点：{
'@'：{
控制器：'RootCtrl'，
controllerAs：rootCtrl
}，
头@：{
templateUrl：'模块/头/ header.html中'，
控制器：'HeaderCtrl'，
controllerAs：headerCtrl
}，
页脚@：{
templateUrl：'模块/页脚/ footer.html'，
控制器：'FooterCtrl'，
controllerAs：footerCtrl
}
}
}）
.STATE（'root.home'，{
父：'根'，
网址：''，
templateUrl：'模块的/ home / home.html做为'，
控制器：HomeController中'，
controllerAs：homeCtrl
}）;
}）;
有对的工作plunker 。
的 UI-路由器逻辑如何找到一个视图的目标/锚：总是试图插入孩子到父 。如果不能，那么使用绝对命名。见：
视图名称 - 相对与绝对名称
所以，我变了，就是父不愿透露姓名的观点正包含一个子目标/锚 - 未命名视图＆LT; UI画面/＆GT; ：
.STATE（'根'，{
摘要：真实，
观点：{
'@'：{
模板：'＆LT; UI画面/＆GT;'，//新行，为孩子的目标
控制器：'RootCtrl'，
controllerAs：rootCtrl
}，
....
另外，因为我们说，那默认的URL为
$ urlRouterProvider.otherwise（'/家）;
我们必须有这样的状态：
.STATE（'root.home'，{
父：'根'，
网址：'/家'，//这是其他方式，有一个启动的东西
检查一下这里
有 plunker这里另一种方法，可以为目标的根鉴于孩子：
.STATE（'root.home'，{
父：'根'，
网址：'/家，
观点：{
'@'：{
templateUrl：home.html做为'，
控制器：HomeController中'，
controllerAs：homeCtrl
}
}，
在此情况下，父状态不要有＆LT; UI画面/＆GT; - 我们的目标根，但我们不会继承任何东西。 .. 这是为什么？请参阅此链接：
通过范围视图层次只有
继承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.
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'
});
});
There is a link to working 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:
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:
.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
这篇关于角UI路由器：家长和放大器;子视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
