AngularJS angular ui router - Pass custom data to controller

Question

Following is my code:

 .state('tab.dash', {
      url: '/dash',
      views: {
          'tab-dash': {
              templateUrl: 'templates/tab1.html',
              controller: 'QuestionsCtrl'
              //,resolve: { type: '.net' }
          }
      }
  })

  .state('tab.friends', {
      url: '/friends',
      views: {
          'tab-friends': {
              templateUrl: 'templates/tab1.html',
              controller: 'QuestionsCtrl'
              //,resolve: { type: 'SQL' }
          }
      }
  })

I want to pass a a different custom property to the above two routes since they use the same Controller and View, in order to differentiate it. I have tried many things. What can I try next?

Answer 1

you can pass custom data as follows

.state('tab.dash', {
      url: '/dash',
      data: {
        customData1: 5,
        customData2: "blue"
      },
      views: {
          'tab-dash': {
              templateUrl: 'templates/tab1.html',
              controller: 'QuestionsCtrl'
              //,resolve: { type: '.net' }
          }
      }
  })

  .state('tab.friends', {
      url: '/friends',
      data: {
        customData1: 6,
        customData2: "orange"
      },
      views: {
          'tab-friends': {
              templateUrl: 'templates/tab1.html',
              controller: 'QuestionsCtrl'
              //,resolve: { type: 'SQL' }
          }
      }
  })

In your controller, you can get the data value as follows

function QuestionsCtrl($state){
    console.log($state.current.data.customData1);
    console.log($state.current.data.customData2);
}

Read more about this topic here https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views#inherited-custom-data