user3818435 user3818435 - 9 months ago 36
AngularJS Question

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

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.


I hope this will help someone.

Answer Source

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.