Accessing parameters in custom data

Question

I'm using custom data to add a human readable name to my states, like this:

.state('data', {
  parent: 'week',
  url: '/data',
  displayName: 'Data Overview',

I can then use it in the template like this:

<h1>Showing {{$state.current.displayName}}</h1>

Which is nice. But now I want to create a route with a parameter, and use that parameter in the displayName:

.state('upload', {
  parent: 'week',
  url: '/upload/:level',
  displayName: 'Data Upload for ' + level,
  ...

But I can't figure out the correct syntax to use access the value of level inside the displayName.

Answer 1

The static data (suggested to be placed inside of data : {} - not to be directly on the root state settings) - are static data. So:

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...)

See the doc:

Attach Custom Data to State Objects

You can attach custom data to the state object (we recommend using a data property to avoid conflicts).

// Example shows an object-based state and a string-based state
var contacts = { 
    name: 'contacts',
    templateUrl: 'contacts.html',
    data: {
        customData1: 5,
        customData2: "blue"
    }  
}
$stateProvider
  .state(contacts)
  .state('contacts.list', {
    templateUrl: 'contacts.list.html',
    data: {
        customData1: 44,
        customData2: "red"
    } 
  })

With the above example states you could access the data like this:

function Ctrl($state){
    console.log($state.current.data.customData1) // outputs 5;
    console.log($state.current.data.customData2) // outputs "blue";
}