Question

我正在使用angular-ui-router多个视图。

我有一个恒定的模块：

angular.module('app.constants', [])

.constant('constants', {
    parent1: "parent1",
    parent2: "parent2"
});

我的州看起来像这样：

.config(['$stateProvider', 'constants', function ($stateProvider, constants) {

    $stateProvider.state(constants.parent1, {
        abstract: true,
        url: '/' + constants.parent1
    });

    $stateProvider.state(constants.parent1 + ".state1", {
        url: '/state1',
        views: {
            'cool-view@' + constants.parent1 + 'state1': {
                templateUrl: root + 'views/splashScreen/splash.html',
                controller: 'splashScreenCtrl'
            }
        }
    });

   $stateProvider.state(constants.parent2, {
        abstract: true,
        url: '/' + constants.parent2
    });

    $stateProvider.state(constants.parent2 + ".state1", {
        url: '/state1',
        views: {
            'cool-view@' + constants.parent2 + 'state1': {
                templateUrl: root + 'views/splashScreen/splash.html',
                controller: 'splashScreenCtrl'
            }
        }
    });

}]);

我有很多父抽象状态。在子状态中，我有一个我想要触发的命名视图。问题是我无法动态创建该行：

'cool-view@' + constants.parent1 + 'state1'

它适用于：

'cool-view@parent1.state1'

给我一个错误。我如何能够在视图对象中创建动态字段名称。我想能够动态创建它的原因是因为我有一个恒定的模块，我可能会在将来更改，我不想在视图中对其进行硬编码。

Answer 1

jsfiddle解决这个问题而没有太多考虑你为什么这样做：

http://jsfiddle.net/qq1rbbb7/

var constants = { parent2: "someThing" };
var root = "root";
var views = {};

views['cool-view@' + constants.parent2 + 'state1'] = {
    templateUrl: root + 'views/splashScreen/splash.html',
    controller: 'splashScreenCtrl'  
};

var state = {
    'url': '/state1',
    'views': views
};

console.debug(state);

angular-ui-router无法创建动态命名的命名视图

1 个答案: