Question

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

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

问题是指令隔离了它们的命名空间，所以当我想引用从输入插入数据的主要范围时，我需要这样做：

<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/，您可以继续享受范围继承。

Answer 2

您可以使用与常规控制器相同的方式在指令上使用controllerAs语法。

http://blog.thoughtram.io/angularjs/2015/01/02/exploring-angular-1.3-bindToController.html

Answer 3

并不总是需要使用隔离范围，但如果您真的需要，您也可以像发送NSUserDefaults一样发送foo对象。

title

在html中：

  scope: {
    title: '@',
    foo: '='
  }

您还需要初始化Foo = {{foo.x}} <my-tabs> <my-pane title="Hello" foo="foo"> <input ng-model="foo.x"></input> <h4>Hello</h4> <p>Lorem ipsum dolor sit amet</p> </my-pane>对象以传递其引用，在此特定示例中，它位于foo上。 You can check it here

具有孤立范围的指令：如何避免$ parent。$ parent。$ parent。$ parent.foo

3 个答案: