推荐设备MORE

免费制作网页

免费制作网页

公司新闻

房地产产微信小程序_详解angularJs模块ui

日期:2021-01-12
我要分享
详解angularJs模块ui-router之状态嵌套和视图嵌套     -2   这篇文章主要介绍了详解angularJs模块ui-router之状态嵌套和视图嵌套,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
使用“点标记法”,例如:.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属性为父状态对象,像下面这样:

var contacts = { 
 name: 'contacts', //mandatory
 '
var contactsList = { 
 name: 'list', //mandatory
 parent: contacts, //mandatory
 '
$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', {
 ',
 controller: function($scope){
 $scope.contacts = [{ name: 'Alice' }, { name: 'Bob' }];
 .state('contacts.list', {
 '
function MainCtrl($state){
 $state.transitionTo('contacts.list');

版本 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:{
 // customData1 inherited from 'parent'
 // 覆盖了 customData2 的值
 customData2: "UI-Router!"
$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!"

Abstract States 抽象状态

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

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

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

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

抽象状态使用示例:

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

$stateProvider
 .state('contacts', {
 abstract: true, 
 url: '/contacts',
 // Note: abstract still needs a ui-view for its children to populate.
 // You can simply add it inline here.
 template: ' ui-view/ '
 .state('contacts.list', {
 // url e '/contacts/list'
 url: '/list'
 //...more
 .state('contacts.detail', {
 // url e '/contacts/detail'
 url: '/detail',
 //...more

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

$stateProvider
 .state('contacts', {
 abstract: true,
 '
 .state('contacts.list', {
 // loaded into ui-view of parent's template
 '
 .state('contacts.detail', {
 // loaded into ui-view of parent's template
 '
 })

controller: function($scope){ $scope.contacts = [{ id:0, name: "Alice" }, { id:1, name: "Bob" }]; .state('contacts.list', { url: '/list', ' .state('contacts.detail', { url: '/:id', ', controller: function($scope, $stateParams){ $scope.person = $scope.contacts[$stateParams.id];
li ng-repeat="person in contacts" a ng-href="#/contacts/{{person.id}}" rel="external nofollow" {{person.name}} /a /li /ul