本文介绍了角UI路由器:保持相同的用户界面视图儿童的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我需要孩子的状态能够使用父状态的决心功能。但我也需要保持相同的用户界面,查看这两个州。这里有一个。并有一个code
$ stateProvider
.STATE('父',{
网址:/,
模板:'< P>您好{{parent.one}}< / P>< BR>'
+'<按钮NG点击=goToChild()>子< /按钮>< BR>,
//下面这一个工作,但我并不需要它
//模板:'< P>您好{{parent.one}}< / P>< BR>'
// +'<按钮NG点击=goToChild()>子< /按钮>< BR>'
// +'<格UI的视图>< / DIV>,
解析:{
测试:功能(){
返回1;
}
},
控制器:函数($范围,$状态,测试){
$ scope.parent = {之一:测试};
$ scope.goToChild =功能(){
$ state.go('parent.child');
}
}
})
.STATE('parent.child',{
网址:/子,
模板:'&所述p为H.;你好{{child.one}}&下; / P>',
控制器:函数($范围,测试){
$ scope.child = {之一:测试};
}
})
$ urlRouterProvider.otherwise('/');
解决方案
有
答案应该被隐藏/在这两种状态的定义揭示了:
父多的意见
.STATE('父',{
网址:/,
观点:{
'@':{
模板:'<格UI视图=>< / DIV>,
控制器:函数($范围,$状态,测试){
$ scope.parent = {之一:测试};
$ scope.goToChild =功能(){
$ state.go('parent.child');
}
}
},
@parent:{
模板:'< P>家长说:你好< pre> {{父| JSON}}< / pre>< / P>'
+'< BR><按钮NG点击=goToChild()>子< /按钮>< BR>,
}
},
解析:{
测试:函数(){返回1; },
},
})
儿童消费父决心,有自己的
.STATE('parent.child',{
网址:^ /孩子/:ID
模板:'< P>儿童说:你好< pre> {{子| JSON}}< / pre>< / P>,
解析:{
testChild:函数(){返回2; },
},
控制器:函数($范围,测试testChild){
$ scope.child = {
之一:测试,
二:testChild,
父:$ scope.parent,
};
},
})
检查一下
和它是如何工作的?那么,这一切是基于:
通过范围视图层次只有
继承and also:
View Names - Relative vs. Absolute Names
.state('report',{
views: {
'filters@': { },
'tabledata@': { },
'graph@': { }
}
})
So, the above documentation cites are the core of the plunker. The parent uses multi views, one of them is unnamed - and will be used for inheritance. Parent also injects into that view its own "parent" view. The Resolve of a parent is in place...
Child now injects into anchor of its parent, which does have all the stuff needed. That means, that child does inherit scope and also resolve stuff. It shows its own resolve as well...
这篇关于角UI路由器:保持相同的用户界面视图儿童的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!