can I set ui-router state's data attribute dynamically? - angularjs

Question

Imagine I have a state definition like this:
$stateProvider.state("main", {
url: "main/:param/list",
controller: "MainController",
data: function($stateParams) {
if($stateParams.param === "A") {
return 'param1';
} else if($stateParams.param === "B") {
return 'param2';
}
}
}
Can I set data attribute like this? Is there any way to achieve the desired behavior?

Answer 1

the data object is a storage for any data you want to add to the $state service, which means you can store the function inside it, but you it won't be executed which i assume not what you're trying to achieve, You can learn about adding the custom data to the $state here
, so to do the logic you wanna do you have to use the controller not the $state service, as follows:
$stateProvider.state("main", {
url: "main/:param/list",
controller: "MainController"/*,
//only if you want to "store" your data on the $state, u can use it like this
data: {
myCustomParam: 'my Awesome Value'
}*/
})//..all your other states
//now you pass the parameter in the url like This
//http://xxxxxxx/main/myparamvalue/list
//and in the controller
app.controller('MainController',function($state, $stateParams){
//Here you do your Logic
if($stateParams.param === "myparamvalue") {
console.log('param1');//it should go here
} else if($stateParams.param === "anythingelse") {
console.log('param2');
}
/*if you have any values to get from the state data as previously mentioned you can get it like this*/
console.log($state.current.data.myCustomParam);//output: my Awesome Value
});