Access parent directive's controller scope variables in child directive

Question

I have two directives namely 'parent' and 'child'. I want to set visibility of child directive based on the value of a scope variable in parent directive's controller.

<div>
    <h1>Parent Directive selected index : {{ selectedIndex }}</h1>
    <div id="children" ng-transclude></div>
</div>

parent directive's controller has selectedIndex variable in its scope and child directive has id variable in its scope. I am trying to use ng-show on child directive using

<div ng-show="id==selectedIndex">
  <h1>{{id}}</h1>
</div>

It isn't working properly.

I am attaching a jsfiddle link of the scenario.

https://jsfiddle.net/vibhanshu/pep44qz7/10/

this question was already answered by this [post](http://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs) — Christopher Wood, Dec 08 '15 at 08:58

score 1 · Accepted Answer · answered Dec 08 '15 at 09:03

You can define a bidrectional property on your child directive selectedIndex: '='

scope: { id: '@', selectedIndex: '='}

<parent>
      <child id="1" selected-index="selectedIndex"></child>
      <child id="2" selected-index="selectedIndex"></child>
</parent>

Updated Fiddle - https://jsfiddle.net/pep44qz7/12/

Access parent directive's controller scope variables in child directive

1 Answers1