前端之家收集整理的这篇文章主要介绍了
详解angularJs模块ui-router之状态嵌套和视图嵌套,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
状态嵌套的方法
状态可以相互嵌套。有三个嵌套的方法:
@H_
502_6@
使用“点标记法”,例如:.state('contacts.list',{})
使用parent属性,指定一个父状态的名称字符串,例如:parent: 'contacts'
使用parent属性,指定一个父状态对象,例如:parent: contacts(contacts 是一个状态对象)
在$stateProvider中可以使用点语法来表示层次结构,下面,contacts.list是contacts的子状态。
使用parent属性,指定一个父状态的名称字符串
基于对象的状态
如果你不喜欢使用基于字符串的状态,您还可以使用基于对象的状态。name属性将在状态对象内部设置,在所有的子状态对象中设置parent属性为父状态对象,像下面这样:
$stateProvider
.state(contacts)
.state(contactsList)
$state.transitionTo(states.contacts);
在方法调用和属性比较时可以直接引用状态对象:
注册状态的顺序
可以以任何顺序和跨模块注册状态,也可以在父状态存在之前注册子状态。一旦父状态被注册,将触发自动排序,然后注册子状态。
状态命名
状态不允许重名,当使用“点标记法”,parent属性被推测出来,但这并不会改变状态的名字;当不使用“点标记法”时,parent属性必须明确指定,但你仍然不能让任何两个状态有相同的名称,例如你不能有两个不同的状态命名为”edit”,即使他们有不同的父状态。
嵌套状态和视图
当应用程序在一个特定的状态 - 当一个状态是活动状态时 - 其所有的父状态都将成为活跃状态。下面例子中,当”contacts.list”是活跃状态时,”contacts”也将隐性成为活跃状态,因为他是”contacts.list”的父状态。
子状态将把其对应的模板加载到父状态对应模板的ui-view中。
function MainCtrl($state){
$state.transitionTo('contacts.list');
}
解决依赖项注入到子状态的
解决函数中
resB: function(resA){
return {'value': resA.value + 'B'};
}
},// 将父状态的
解决依赖项注入到子状态的控制器中
controller: function($scope,resA,resB){
$scope.resA2 = resA.value;
$scope.resB = resB.value;
}
$rootScope.$on('$stateChangeStart',function(event,toState){
var greeting = toState.data.customData1 + " " + toState.data.customData2;
console.log(greeting);
// 'parent'被激活时,输出 "Hello World!"
// 'parent.child'被激活时,输出 "Hello UI-Router!"
})
'
})
.state('contacts.list',{
// url will become '/contacts/list'
url: '/list'
//...more
})
.state('contacts.detail',{
// url will become '/contacts/detail'
url: '/detail',//...more
})