javascript - 在子指令中访问父指令的 Controller 范围变量

Question

我有两个指令，即“ parent ”和“ child ”。我想根据父指令 Controller 中范围变量的值设置子指令的可见性。

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

父指令的 Controller 在其范围内有 selectedIndex 变量，子指令在其范围内有 id 变量。我正在尝试使用 ng-show 在子指令上使用

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

它无法正常工作。

我附上了场景的 jsfiddle 链接。

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

Answer 1

您可以在子指令上定义双向属性 selectedIndex: '='

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

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

更新 fiddle - https://jsfiddle.net/pep44qz7/12/