1

How to access a variable of child directive in parent directive? I have a parent directive like:

<parent-directive>
  <child-directive></child-directive>
</parent-directive>

child directive contains an object "states.visible" I want to access that in parent directive.

georgeawg
  • 48,608
  • 13
  • 72
  • 95
tech nerd
  • 39
  • 1
  • 9
  • 1
    I have been asked to use isolated scope ? I read about it but can only understand flow from parent to child not child to parent. I am working with Angular js – tech nerd Jun 18 '18 at 16:40
  • Flow from child to parent is done with events using expression (method) binding defined with the `&` symbol. Child variables are encapsulated. Parent classes provide variables and methods (functions) to a child. Child classes react to variable changes and communicate events to the parent using the methods (functions) provided by the parent. – georgeawg Jun 18 '18 at 18:21
  • 1
    Questions asking for **homework** help must include a summary of the work you've done so far to solve the problem, and a description of the difficulty you are having solving it. – georgeawg Jun 18 '18 at 19:03

1 Answers1

1

I think the AngularJs way of doing this would be accomplished with implementing an output in the child directive. Every time the "states" object changes the child calls the output function and the parent can do whatever it wants with it.

AngularJS v1.5+ Method:

HTML

<parent-directive>
  <child-directive on-state-change="$ctrl.stateChange($stateChangeObj)"></child-directive>
</parent-directive>

Child Controller

    $scope.$watch('$ctrl.state', function(n, old){
        ctrl.onStateChange({$stateChangeObj: n});
    })

Parent Controller

ctrl.stateChange = function(state){
    // do something
}

https://docs.angularjs.org/guide/component#component-based-application-architecture

Note: Component based architecture was introduced in AngularJS v1.5.

Prior to AngularJS v1.5 Method:

this should technically work the same with a two way bound function. except the html would look like this 

on-state-change="$ctrl.stateChange"

instead of 

on-state-change="$ctrl.stateChange($stateChangeObj)"

. then in the child it would be 

ctrl.onStateChange(n);

instead of

 ctrl.onStateChange({stateChangeObj: n});
Phil Ninan
  • 1,108
  • 1
  • 14
  • 23
  • Ah thank you !...Yes it is somewhat similar to what I am trying to do. I will give it a try and will post back if it worked – tech nerd Jun 18 '18 at 16:52
  • if you have never worked with an output, just letting you know that the stateChangeObj defined in the html is supposed to be the key in the object you pass to the output. – Phil Ninan Jun 18 '18 at 16:55
  • I cannot do it this way. I have to pass a variable using "=" . – tech nerd Jun 18 '18 at 17:03
  • that is two way bound variable. if you are using < angularjs 1.5 outputs are not yet available. – Phil Ninan Jun 18 '18 at 17:08
  • Can you please help me out with that ? – tech nerd Jun 18 '18 at 17:14
  • this should technically work the same with a two way bound function. except the html would look like this on-state-change="$ctrl.stateChange" instead of on-state-change="$ctrl.stateChange(stateChangeObj)". then in the child it would be ctrl.onStateChange(n); instead of ctrl.onStateChange({stateChangeObj: n}); – Phil Ninan Jun 18 '18 at 17:16
  • In component based architecture, components avoid use of `$scope` and `$watch` as they don't upgrade to Angular 2+ well. See [Writing Components without Watchers](https://stackoverflow.com/a/35535336/5535245) – georgeawg Jun 18 '18 at 18:07
  • 1
    The standard convention is to prefix arguments local to the child scope with a `$` sign. Use `$event` to denote a change object. – georgeawg Jun 18 '18 at 18:32