详解angularJs模块ui-router之状态嵌套和视图嵌套

2024-02-24 19:51:23 55

状态嵌套的方法

状态可以相互嵌套。有三个嵌套的方法：

使用“点标记法”，例如：.state('contacts.list',{})
使用parent属性，指定一个父状态的名称字符串，例如：parent:'contacts'
使用parent属性，指定一个父状态对象，例如：parent:contacts（contacts是一个状态对象）

点标记法

在$stateProvider中可以使用点语法来表示层次结构，下面，contacts.list是contacts的子状态。

$stateProvider
.state('contacts',{})
.state('contacts.list',{});

使用parent属性，指定一个父状态的名称字符串

$stateProvider
.state('contacts',{})
.state('list',{
parent:'contacts'
});

基于对象的状态

如果你不喜欢使用基于字符串的状态，您还可以使用基于对象的状态。name属性将在状态对象内部设置，在所有的子状态对象中设置parent属性为父状态对象，像下面这样：

varcontacts={
name:'contacts',//mandatory
templateUrl:'contacts.html'
}
varcontactsList={
name:'list',//mandatory
parent:contacts,//mandatory
templateUrl:'contacts.list.html'
}

$stateProvider
.state(contacts)
.state(contactsList)

$state.transitionTo(states.contacts);在方法调用和属性比较时可以直接引用状态对象：

$state.current===states.contacts;
$state.includes(states.contacts)

注册状态的顺序

可以以任何顺序和跨模块注册状态，也可以在父状态存在之前注册子状态。一旦父状态被注册，将触发自动排序，然后注册子状态。

状态命名

状态不允许重名，当使用“点标记法”，parent属性被推测出来，但这并不会改变状态的名字；当不使用“点标记法”时，parent属性必须明确指定，但你仍然不能让任何两个状态有相同的名称，例如你不能有两个不同的状态命名为”edit”，即使他们有不同的父状态。

嵌套状态和视图

当应用程序在一个特定的状态-当一个状态是活动状态时-其所有的父状态都将成为活跃状态。下面例子中，当”contacts.list”是活跃状态时，”contacts”也将隐性成为活跃状态，因为他是”contacts.list”的父状态。

子状态将把其对应的模板加载到父状态对应模板的ui-view中。

$stateProvider
.state('contacts',{
templateUrl:'contacts.html',
controller:function($scope){
$scope.contacts=[{name:'Alice'},{name:'Bob'}];
}
})
.state('contacts.list',{
templateUrl:'contacts.list.html'
});

functionMainCtrl($state){
$state.transitionTo('contacts.list');
}


MyContacts




{{contact.name}}

子状态将从父状态继承哪些属性？

子状态将从父母继承以下属性：

通过解决器解决的依赖注入项
自定义的data属性

除了这些，没有其他属性继承下来（比如controllers、templates和url等）

继承解决的依赖项

版本v0.2.0的新特性

子状态将从父状态继承通过解决器解决的依赖注入项，并且可以重写（overwrite）依赖项，可以将解决依赖项注入子状态的控制器和解决函数中。

$stateProvider.state('parent',{
resolve:{
resA:function(){
return{'value':'A'};
}
},
controller:function($scope,resA){
$scope.resA=resA.value;
}
})
.state('parent.child',{
resolve:{
//将父状态的解决依赖项注入到子状态的解决函数中
resB:function(resA){
return{'value':resA.value+'B'};
}
},
//将父状态的解决依赖项注入到子状态的控制器中
controller:function($scope,resA,resB){
$scope.resA2=resA.value;
$scope.resB=resB.value;
}

继承自定义data属性值

子状态将从父状态继承自定义data属性值，并且可以重写（overwrite）data属性值

$stateProvider.state('parent',{
data:{
customData1:"Hello",
customData2:"World!"
}
})
.state('parent.child',{
data:{
//customData1inheritedfrom'parent'
//覆盖了customData2的值
customData2:"UI-Router!"
}
});

$rootScope.$on('$stateChangeStart',function(event,toState){
vargreeting=toState.data.customData1+""+toState.data.customData2;
console.log(greeting);

//'parent'被激活时，输出"HelloWorld!"
//'parent.child'被激活时，输出"HelloUI-Router!"
})

AbstractStates抽象状态

一个抽象的状态可以有子状态但不能显式激活，它将被隐性激活当其子状态被激活时。

下面是一些你将可能会使用到抽象状态的示例：

为所有子状态预提供一个基url
在父状态中设置template属性，子状态对应的模板将插入到父状态模板中的ui-view(s)中
通过resolve属性，为所有子状态提供解决依赖项
通过data属性，为所有子状态或者事件监听函数提供自定义数据
运行onEnter或onExit函数，这些函数可能在以某种方式修改应用程序。
上面场景的任意组合

请记住：抽象的状态模板仍然需要，来让自己的子状态模板插入其中。因此，如果您使用抽象状态只是为了预提供基url、提供解决依赖项或者自定义data、运行onEnter/Exit函数，你任然需要设置template:""。

抽象状态使用示例：

为子状态提供一个基url，子状态的url是相对父状态的

$stateProvider
.state('contacts',{
abstract:true,
url:'/contacts',

//Note:abstractstillneedsaui-viewforitschildrentopopulate.
//Youcansimplyadditinlinehere.
template:''
})
.state('contacts.list',{
//urlwillbecome'/contacts/list'
url:'/list'
//...more
})
.state('contacts.detail',{
//urlwillbecome'/contacts/detail'
url:'/detail',
//...more
})

将子状态模板插入到父状态指定的ui-view中

$stateProvider
.state('contacts',{
abstract:true,
templateURL:'contacts.html'
)
.state('contacts.list',{
//loadedintoui-viewofparent'stemplate
templateUrl:'contacts.list.html'
})
.state('contacts.detail',{
//loadedintoui-viewofparent'stemplate
templateUrl:'contacts.detail.html'
})


ContactsPage

详解angularJs模块ui-router之状态嵌套和视图嵌套

MyContacts

ContactsPage

ContactsPage

{{person.name}}

随机推荐

详解angularJs模块ui-router之状态嵌套和视图嵌套

MyContacts

ContactsPage

ContactsPage

{{person.name}}

热门推荐

随机推荐