在 Angular ui-router 中从数组对象创建状态 [英] Create states from array object in Angular ui-router

问题描述

我能够从像这样的对象创建状态...

I am able to create a state from an object like so...

    var stateTest = {
            name: '2',
            views: {
                'video': { 
                  templateUrl: 'templates/2_video.html',
                  controller: 'VideoCtrl'
                },
                'content': {
                  template: '{{content}}',
                  controller: 'VideoCtrl' 
                }
            }
    };

$stateProvider.state(stateTest);

但我需要做的是从数组创建状态.这是我的尝试，但它不起作用.

but what I need to do is create states from an array. This was my attempt and it is not working.

var stateList = [
 {
        name: '3',
        views: {
            'video': { 
              templateUrl: 'templates/3.html',
              controller: 'VideoCtrl'
            },
            'content': {
              template: '{{content}}',
              controller: 'VideoCtrl' 
            }
        }
    },{
        name: '4',
        views: {
            'video': { 
              templateUrl: 'templates/4.html',
              controller: 'VideoCtrl'
            },
            'content': {
              template: '{{content}}',
              controller: 'VideoCtrl' 
            }
        }
    }
];

$stateProvider.state(stateList);

然后我想我需要尝试 foreach item 方法...

Then I thought I needed to try the foreach item approach...

var stateList = [
    {
        name: '3',
        templateUrl: 'templates/3.html',
        controller: 'VideoCtrl',
        template: 'content'
    },{
        name: '4',
        templateUrl: 'templates/4.html',
        controller: 'VideoCtrl',
        template: 'content'
    },
];

stateList.forEach(function (item) {
    VideoTest.stateProvider.state(item[0],{
        views: {
            'video': { 
              templateUrl: item[1],
              controller: item[2]
            },
            'content': {
              template: item[3],
              controller: item[2] 
            }
        }
    });
});

还是不行:(想法！?

------- 编辑------
正如 Craig 在回答中指出的那样，我的数组调用被提升了，但我也不需要调用主模块，而是将它放在一个模块配置中，如下所示:

------- EDIT ------
As Craig pointed out in the answer, my array call was jacked up but I also didn't need to call the main module, but rather just place this in a module config like so:

VideoTest.config(function($stateProvider) { 


var stateList = [
 {
        name: '3',
        views: {
            'video': { 
              templateUrl: 'templates/3.html',
              controller: 'VideoCtrl'
            },
            'content': {
              template: '{{content}}',
              controller: 'VideoCtrl' 
            }
        }
    },{
        name: '4',
        views: {
            'video': { 
              templateUrl: 'templates/4.html',
              controller: 'VideoCtrl'
            },
            'content': {
              template: '{{content}}',
              controller: 'VideoCtrl' 
            }
        }
    }
];

stateList.forEach(function (item) {
    $stateProvider.state(item.name,{
        views: {
            'video': { 
              templateUrl: item.views.video.templateUrl,
              controller: item.views.video.controller
            },
            'content': {
              template: item.views.content.template,
              controller: item.views.content.controller
            }
        }
    });
});

});

推荐答案

您的 forEach 实现问题是索引 item[0].传递给 forEach 回调(即 arg[0])的 item 是元素本身，因此将其索引为数组没有意义.

Your problem with your forEach implementation is indexing the item[0]. The item passed to the forEach callback (i.e. arg[0]) is the element itself so indexing this as an array doesn't make sense.

您的数据:

var stateList = [
 {
        name: '3',
        views: {
            'video': { 
              templateUrl: 'templates/3.html',
              controller: 'VideoCtrl'
            },
            'content': {
              template: '{{content}}',
              controller: 'VideoCtrl' 
            }
        }
    },{
        name: '4',
        views: {
            'video': { 
              templateUrl: 'templates/4.html',
              controller: 'VideoCtrl'
            },
            'content': {
              template: '{{content}}',
              controller: 'VideoCtrl' 
            }
        }
    }
];

和状态设置:

stateList.forEach(function (item) {
    VideoTest.stateProvider.state(item.name,{
        views: {
            'video': { 
              templateUrl: item.views.video.templateUrl,
              controller: item.views.video.controller
            },
            'content': {
              templateUrl: item.views.content.templateUrl,
              controller: item.views.content.controller
            }
        }
    });
});

这篇关于在 Angular ui-router 中从数组对象创建状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！