How to find out if angular ui-router user data is inherited from parent state
I want to know if a state data field is inherited in state from parent or not. For example,
$stateProvider.state('parent', {
data:{
customData1: "Hello",
}
})
.state('parent.child', {
data:{
}
});
Here the child state (parent.child) has no user defined data. It inherits CustomData1 from its parent. I want to find out if the data is inherited in parent.child or not. However, I don't want to do something like
if(parent.child.data.customData1==parent.data.customData1)
{
}
Is there any other way to find out?
source to share
I'm not sure what the problem is, and I've already tried to explain how it works here:
I've created a plunker showing how it might work for you.
Let these states. First, some parent / child - where the child overrides everything
.state('parent', {
url: '/parent',
templateUrl: 'tpl.html',
controller: 'controllerParent',
data:{
customData1: "Hello",
customData2: "World!"
}
})
.state('parent.child', {
url: '/child',
templateUrl: 'tpl.child.html',
controller: 'controllerChild',
data:{
customData1: "Goodbye",
customData2: "Problems"
}
});
And also some other parent child. CustomData1 doesn't change here
// Start
.state('other', {
url: "/other",
templateUrl: 'tpl.html',
controller: 'controllerParent',
data:{
customData1: "Hello",
customData2: "Other World!"
}
})
.state('other.child', {
url: "/child",
templateUrl: 'tpl.child.html',
controller: 'controllerChild',
data:{
customData2: "UI-Router!"
}
})
So we can see that paren.child does not match user data at all, while other matches at least customData1. So this check always gives us an answer if the corresponding parent and child data key matches:
$scope.isSame = function(dataKey){
var childData = $state.current.data;
var parentData = $state.$current.parent.data;
return childData[dataKey] === parentData[dataKey];
};
And plucker uses it like:
{{isSame('customData2')}}
Check here
source to share