具有隔离范围的指令：如何避免 $parent.$parent.$parent.$parent.foo答案

【问题标题】：Directives with isolated scope: how to avoid $parent.$parent.$parent.$parent.foo具有隔离范围的指令：如何避免 $parent.$parent.$parent.$parent.foo
【发布时间】：2015-10-12 19:24:55
【问题描述】：

从 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>

这是可以理解的，因为每个transclude和每个isolate scope都创建了一个child scope，所以总共创建了4个嵌套。

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

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

【问题讨论】：

标签： javascript angularjs angularjs-directive angularjs-scope

【解决方案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/ 继续享受范围继承。

【讨论】：

据我通过浏览链接的文章了解这一点，这仍然需要指定我想要绑定的变量 - 为了创建可重用指令，我想避免这种情况。我错了吗？
问题是没有使用 ng-model 中的点。还必须在控制器中创建对象才能通过，即使完全是空的。
对不起 - 我没有关注。第 2 篇文章中的想法是同时具有绑定而不是隔离范围，这在 1.4 之前是不可能的。第一个是因为我看到了一些看起来不对劲的东西，我想警告你:)
似乎嵌入的范围实际上原型继承自我想要绑定到的主要范围 - 我通过尝试解决这个问题浏览的许多文章之一指出了这一点。问题是“打点”，改变作用域变量的实例并不像人们直觉所期望的那样工作（但是，如果你以一种功能性的方式考虑它是有道理的——你是在改变实例，而不是修改它）跨度>

【解决方案2】：

您可以像使用常规控制器一样在指令上使用 controllerAs 语法。

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

【讨论】：

【解决方案3】：

并不总是需要使用隔离作用域，但如果确实需要，您也可以像发送 title 一样发送您的 foo 对象。

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

在 html 中：

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 对象以传递它的引用，在这个特定示例中它位于$rootScope 上。 You can check it here

【讨论】：

整个点将能够制定一个通用的、可重用的指令，而不必为每个用例修改它（绑定变量会有所不同）
@ÁkosVandra 这个将军怎么样？ $parent.$parent.$parent.$parent.foo - 你还得知道foo 这个名字。无论如何，这是您的选择:) 这只是另一种选择。
我并没有真正关注 :) 您显然想知道绑定到什么。无论如何，问题似乎是 ng-model 中的“无点”问题，或者更好地定义了我绑定到字符串而不是嵌入标记中的对象属性的事实。