Accounting for parent state parameters from child state in stateChangeStart
Is there any way to get parameters from parent state.
My states look like this.
$stateProvider
.state('home', {
url: '/home/:param1',
template: '<div>home<ui-view /></div>',
data: {
parentdata: 'parentdata'
}
})
.state('home.child', {
url: '/child/:param2',
template: '<div>index</div>',
data: {
childdata: 'childdata'
}
})
})
I want to access the data value of the parent state from the child state.
$rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
var tosateParam = toState.data.mycustomparam;
//If this is the child state, how can I access the parent state param
//may be like this toState.parent.data.parentParam
});
If my current state name "ABC.childstate"
is how can I access the parameters from the state ABC
.
source to share
If we need to access the parent data {}
, we need ... profit from UI-Router
. Cm:
What do child states inherit from parent states?
small cite:
DO child states inherit the following from parent states:
- Resolved dependencies through permission
- Custom properties
data {}
Nothing else is inherited (no controllers, templates, urls, etc.).
With this clear doc message, we can have states like this (see a working example here ):
$stateProvider
.state('home', {
url: '/home/:param1',
data: { parentdata: 'parentdata', },
...
})
.state('home.child', {
url: '/child/:param2',
data: { childdata: 'childdata', },
...
})
And links like this:
<a href="#/home/justAParent">
<a href="#/home/first1/child/second1">
<a href="#/home/first2/child/second2">
As the documentation reports the result (on state change like this)
$rootScope.$on('$stateChangeStart',
function(event, toState , toParams, fromState, fromParams)
{
console.log(toState.data)
});
IN:
// href #/home/justAParent will show
Object {parentdata: "parentdata"}
// both #/home/first1/child/second1
// and #/home/first2/child/second2 will show
Object {parentdata: "parentdata", childdata: "childdata"}
Check here
source to share
There is a working plunker . Let these states
$stateProvider
.state('home', {
url: '/home/:param1',
template: '<div>home<ui-view /></div>',
})
.state('home.child', {
url: '/child/:param2',
template: '<div>index</div>',
})
And these links:
<a href="#/home/first1/child/second1">
<a href="#/home/first2/child/second2">
Then this:
$rootScope.$on('$stateChangeStart',
function(event, toState , toParams
, fromState, fromParams)
{
console.log(toParams)
});
Give us this:
Object {param1: "first1", param2: "second1"}
Object {param1: "first2", param2: "second2"}
Check it here . Maybe this can also help a little Angular ui-router - how to access the parameters in the nested named view passed from the parent template?
source to share