问题描述
我想建立具有下列结构标题视图,主视图,页脚视图站点。
所以我定义它包含了头和放根路线;页脚。根的孩子将是我所有的sites.Within这些网站我将有更多的嵌套视图。
在code下面它只报头,而不是在页脚&放大器;主视图。当我删除了父继承,这显示了主要的看法,但没有头和放大器;页脚。
HTML
<机身NG-应用=应用程序>
<头UI视图=头>< /头>
<主UI的视图>< / UI的视图>
<页脚UI视图=页脚>< /页脚>
< /身体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
});
});
有对的。
的 UI-路由器
逻辑如何找到一个视图的目标/锚:总是试图插入孩子
到父
。如果不能,那么使用绝对命名。见:
所以,我变了,就是父不愿透露姓名的观点正包含一个子目标/锚 - 未命名视图< UI画面/>
:
.STATE('根',{
摘要:真实,
观点:{
'@':{
模板:'< UI画面/>',//新行,为孩子的目标
控制器:'RootCtrl',
controllerAs:rootCtrl
},
....
另外,因为我们说,那默认的URL为
$ urlRouterProvider.otherwise('/家);
我们必须有这样的状态:
.STATE('root.home',{
父:'根',
网址:'/家',//这是其他方式,有一个启动的东西
检查一下
有另一种方法,可以为目标的根鉴于孩子:
.STATE('root.home',{
父:'根',
网址:'/家,
观点:{
'@':{
templateUrl:home.html做为',
控制器:HomeController中',
controllerAs:homeCtrl
}
},
在此情况下,父状态不要有< UI画面/>
- 我们的目标根,但我们不会继承任何东西。 .. 这是为什么?请参阅此链接:
继承
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路由器:家长和放大器;子视图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!