Accessing ui-router state controller's data in data section

Question

I have the state configuration defined in as follows:

angular.module('app', ['ui.router')
.config(function ($stateProvider, $urlRouterProvider) {
       .state('element', {
        url: '/element',
        templateUrl: 'element.html',
        controller: 'ElementCtrl',
        controllerAs:'ec',
        data: {
            title: 'Element {{ec.name}}',
        }
    })
    .state('element.detail', {
        url: '/detail',
        templateUrl: 'detail.html',
        controller: 'HomeCtrl',
        controllerAs:'hc',
        data: {
            title: 'Detail {{hc.age}}',
        }
    })
.controller('ElementCtrl', function ($scope, $stateParams) {
    this.name = "myName";
})
.controller('HomeCtrl', function ($scope, $stateParams) {
    this.age = "myName22";
});

Here, I want to dynamically determine the data.title field based on the value assigned to the variable in the controller. Is there a way to do this?(It is better if I do this before the state is activated).

score 0 · Answer 1 · edited May 23 '17 at 12:29

It is not possible. See more here:

Accessing parameters in custom data

there is NO way how to set these data dynamically. E.g. based on the $stateParams. These settings are expected to be defined in the .config() phase, not evaluated in .run()(in compariosn with others like resolve, templateUrl...)

The data : {} is intended as a static setting, defined in a config phase.

The way to go is to use resolve : {}:

Resolve

You can use resolve to provide your controller with content or data that is custom to the state. resolve is an optional map of dependencies which should be injected into the controller.

Accessing ui-router state controller's data in data section

1 Answers1

Accessing parameters in custom data

Resolve