I want to access the url parameter($stateParam) inside a abstract state while calling a child state. I am curious to know how that can be done. Code in plunker also
$stateProvider
.state('contacts', {
abstract: true,
//my whole point is to get the id=1 here :(
url: '/contacts/:id',
templateUrl: function($stateParams){
console.log("Did i get the child's parameter here? " + $stateParams.id)
return 'contacts' + $stateParams.id + '.html'; //this will have a ui-view in it which will render its detail.
}
})
.state('contacts.detail', {
url: '/:id',
// loaded into ui-view of parent's template
templateUrl: 'contacts.detail.html',
controller: function($scope, $stateParams){
$scope.person = $scope.contacts[$stateParams.id];
},
onEnter: function(){
console.log("enter contacts.detail");
}
})
})
`
and i call it as
<a ui-sref="contacts.detail({id: 1})">My first contact<a>
Why am I doing this way? Because, my template from the server is different for different contacts, the layout is different.
Well, posting the issue on GitHub got me the answer from the collaborator.
So, here is the thing. The params have to be "named different" even though they are carrying the same information. Kinda weird, but works.
In the template:
<a ui-sref="contacts.detail({id: 1, duplicate_id: 1})">My first contact<a>
and in the javascript
`
$stateProvider
.state('contacts', {
abstract: true,
//my whole point is to get the id=1 here :(
url: '/contacts/:duplicate_id', //using duplicate_id here
templateUrl: function($stateParams){} //...$stateParams will have :duplicate_id key
})
.state('contacts.detail', {
url: '/:id', //using the real one here
templateUrl: function($stateParams){} //....$stateParams will have :id key
});
` UPDATE: I found that the url in this case repeats the same attribute twice which is okay for me as of now. Any suggestions welcome.
Hope this helps!