angular-ui-router unable to create a dynamic named, named view

Question

I am using angular-ui-router multiple views.

I have a constant module:

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

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

my state looks like this:

.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'
            }
        }
    });

}]);

I have many parent abstract states. In a child state i have a named view which i want to trigger. The problem is that i can't dynamically create the line:

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

It will work with :

'[email protected]'

Gives me an error. How will i be able to create a dynamically field name inside the views object. The reason i want to be able to create it dynamically is because i have a constant module which i might change in the future and i do not want to hardcode it in the views.

marko marko · Accepted Answer · 2014-11-30T10:56:59

jsfiddle to solve this problem without much thinking about why you are doing this:

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 unable to create a dynamic named, named view

1 Answers