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?

Asik · Accepted Answer · 2014-11-15 17:33:30Z

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

raman thakur · Accepted Answer · 2015-02-04 09:10:19Z

0

There are several options to do this,

For smaller data sets you could use the $cookieStore, for data that is under 4k Another option, especially with large data sets, would be to use Local Storage and then retrieve the data on page load/reload. if it is only a very small amount of data, or data that is used through out multiple page you could use $rootscope, but this is not the best option as it just like polluting the global name space. The last option, depending on how the data is retrieved, a service could be implemented, that is basically a singleton that can be passed to various angular scope.

answered Feb 4, 2015 at 9:10

raman thakur

3593 silver badges3 bronze badges

Collectives™ on Stack Overflow

AngularJS Angular ui router - Pass custom data to controller

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related