javascript - 具有隔离范围的指令 : how to avoid $parent. $parent.$parent.$parent.foo

Question

从 angularJS 指南中的“如何创建通信指令”开始，https://docs.angularjs.org/guide/directive ,

我正在尝试使用该布局来制作可导航的表单。

问题在于指令隔离了它们的 namespace ，因此当我想引用从输入插入数据的主范围时，我需要这样做:

<div id="showfoo">Foo = {{foo}}</div>

<form-tabs>
  <form-tab>
    <input ng-model="$parent.$parent.$parent.$parent.foo" />
  </form-tab>
  <form-tab>
    <input ng-model="$parent.$parent.$parent.$parent.foo" />
  </form-tab>
  <form-tab>
    <input ng-model="$parent.$parent.$parent.$parent.foo" />
  </form-tab>
</form-tabs>

这是可以理解的，因为为每个嵌入作用域和每个隔离作用域创建了一个子作用域，因此总共创建了 4 个嵌套。

问题是，如何避免这种情况？理想情况下，我想做一个 <input ng-model="foo"> ，并让它更新 div#showfoo

参见http://plnkr.co/edit/jgD7a6W53518qpyLNUcx?p=preview获取完整代码。

Answer 1

首先 - 尽量避免在非对象项上使用 ng-model:http://nathanleclaire.com/blog/2014/04/19/5-angularjs-antipatterns-and-pitfalls/

第二 - 您可以尝试使用服务(看起来不太好)，或者使用新模式 http://toddmotto.com/no-scope-soup-bind-to-controller-angularjs/您可以在其中继续享受范围继承。