Access value of a variable of child directive in parent directive

Question

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.

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
– tech nerd, Commented Jun 18, 2018 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
– georgeawg, Commented Jun 18, 2018 at 18:21
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
– georgeawg, Commented Jun 18, 2018 at 19:03

Phil Ninan · Accepted Answer · 2018-06-19 14:30:45Z

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});

edited Jun 19, 2018 at 14:30

answered Jun 18, 2018 at 16:47

Phil Ninan

1,1981 gold badge14 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

tech nerd Over a year ago

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

Phil Ninan Over a year ago

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.

tech nerd Over a year ago

I cannot do it this way. I have to pass a variable using "=" .

Phil Ninan Over a year ago

that is two way bound variable. if you are using < angularjs 1.5 outputs are not yet available.

georgeawg Over a year ago

The standard convention is to prefix arguments local to the child scope with a $ sign. Use $event to denote a change object.

|

Collectives™ on Stack Overflow

Access value of a variable of child directive in parent directive

1 Answer 1

8 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Linked

Related