how can I pass custom data to a state from a view in ui-router?

Question

I'm using $stateProvider for my route configuration. I wanted to take advantage of custom data they provide to pass some custom data from one partial page to the other (on ng-click).

This is the best I got so far:

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";  } 

Source

Assume I have another state called customers with its own template and controller. How can I change the value of contacts's state data object within customers controller/view? i.e: I want to change from this:

data: {     customData1: 44,     customData2: "red" }  

to this:

data: {     customData1: 100,     customData2: "green" }  

Any pointer or sample will be appreciated!

Revised - I got it working by myself and here is how:. on a controller (say: customerCtrl), you can get contact's state by name and make the change you want-such as updating the custom data object's property value like as follows:

 //get the state by name and change the value of custom data property   $state.get('contacts').data.customData1= 100;  $state.go('contacts'); // then you can make a go to that state. 

Answer 1

I got it working by myself and here is how. On a controller (say: customerCtrl), you can get contact's state by name(https://github.com/angular-ui/ui-router/wiki/Quick-Reference#statename and look for $state.get([stateName]) )
Once you get the state, you can make the change you want-such as updating the custom data object's property value as follows:

//get the state by name and change the value of custom data property   $state.get('contacts').data.customData1= 100;   // then you can go to that state.  $state.go('contacts'); 

I hope this will help someone.