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.

Answer 2

If you are trying to read custom data for the current state you can easily read it as $state.current.data.customData1 = 100;