3

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?

Radim Köhler
  • 122,561
  • 47
  • 239
  • 335
user1985948
  • 291
  • 1
  • 13
  • I'd like to be able to disable this inheritance too. I keep data specific to each state and need always to remember to overwrite it in children. Not very efficient. – demisx Apr 06 '15 at 04:21

1 Answers1

0

While I am not sure why would you like to do that.. you can hide the parent implementation:

Inherited Custom Data

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
})
Radim Köhler
  • 122,561
  • 47
  • 239
  • 335
  • Here, the parent.child state will inherit the customData1 from the parent. I don't want that to happen. I want the parent.child.data.customData1 to be null.(or undefined).In other words, I want to disable the data inheritance from parent to child state. – user1985948 Nov 28 '14 at 08:14
  • 1
    I can't do that. Thats why I mentioned I want to disable the inheritance of data :) – user1985948 Nov 28 '14 at 08:19
  • Stop inheritance of `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 – Radim Köhler Nov 28 '14 at 08:34
  • 1
    Thank you.It is also ok if I come to know whether the data is inherited or custom defined. I had posted another question [here](http://stackoverflow.com/questions/27170670/how-to-know-whether-angular-ui-router-custom-data-is-inherited-from-the-parent-s). Can you please let me know if that is possible? – user1985948 Nov 28 '14 at 08:37
  • ;) ;) ;) well it is so hard with you! do you know that? you already have the answer but you again say: I do not want it ;) Simply, your if (`if(parent.child.data.customData1==parent.data.customData1)`) statement is the way. You can create some Helper method, but evaluation will be exactly the same. Good luck sir ;) – Radim Köhler Nov 28 '14 at 08:39
  • 1
    :) but this test will fail if I explicitly mention the same value in parent as well as child state :) ie,`$stateProvider.state('parent', { data:{ customData1: "Hello"; } }) .state('parent.child', { data:{ // customData1 inherited from 'parent' // but we'll overwrite customData2 customData1: "Hello"; } });` – user1985948 Nov 28 '14 at 08:47