How can I disable a child state in angular UI-router from inheriting its parent state's data?
For example, I have a parent and child state as follows:
$stateProvider.state('parent', {
data:{
customData1: "Hello",
}
})
.state('parent.child', {
data:{
}
});
Here the child state(parent.child) inherits the data(customData1) of its parent.
How can I disable it from inheriting parent's data?
While I am not sure why would you like to do that.. you can hide the parent implementation:
Child states will inherit data properties from parent state(s), which they can overwrite.
$stateProvider.state('parent', {
data:{
customData1: "Hello",
customData2: "World!"
}
})
.state('parent.child', {
data:{
// customData1 inherited from 'parent'
// but we'll overwrite customData2
customData2: "UI-Router!"
}
});
$rootScope.$on('$stateChangeStart', function(event, toState){
var greeting = toState.data.customData1 + " " + toState.data.customData2;
console.log(greeting);
// Would print "Hello World!" when 'parent' is activated
// Would print "Hello UI-Router!" when 'parent.child' is activated
})
data is impossible. The above answer is the soltuion. (But from my perspective, just my point of view - that could not be issue. You should be able to handle your state definitions. It is in your hands. If you need different setting in your child, then use data : { subChildSetting : {...}}) Sorry for not having "the answer". Good luck with UI-Router anyhow$stateProvider.state('parent', { data:{ customData1: "Hello"; } }) .state('parent.child', { data:{ // customData1 inherited from 'parent' // but we'll overwrite customData2 customData1: "Hello"; } });