Angular 中的范围继承

Question

我是 Angular 的新手，所以我试图按照教程进行操作，但就是不明白。令我困惑的是点符号：

<div ng-app="">
  <input type="text" ng-model="data.message">
  <h1>{{ data.message }}</h1>

  <div ng-controller="FirstCtrl">
    <input type="text" ng-model="data.message">
    <h1>{{ data.message }}</h1>
  </div>

  <div ng-controller="SecondCtrl">
    <input type="text" ng-model="data.message">
    <h1>{{ data.message }}</h1>
  </div>
</div>

在任何输入框中键入值都会更新所有其他输入框。所以，我认为这里发生的是ng-model控制器外部的第一个声明是将输入元素值绑定到根范围中的 data.message 模型。我不明白内部的绑定如何ng-controller从根范围，以及为什么插入ng-controller范围内的值将显示在该范围之外的输入框中？

另外如果data.被删除

<div ng-app="">
  <input type="text" ng-model="message">
  <h1>{{ message }}</h1>

  <div ng-controller="FirstCtrl">
    <input type="text" ng-model="message">
    <h1>{{ message }}</h1>
  </div>

  <div ng-controller="SecondCtrl">
    <input type="text" ng-model="message">
    <h1>{{ message }}</h1>
  </div>
</div>

那种行为消失了，为什么呢？

Answer 1

您的第一个示例是在 Angular 中执行操作的推荐方法。最佳实践是，ngModels 中应该始终有一个点，因为在 an 中使用原语ngModel是 Angular 中错误的常见来源。

\n\n

Angular 的理解范围文档对此进行了详细讨论：

\n\n

\n

通过遵循“最佳实践”，即在您的 ng-models \xe2\x80\x93 中始终有一个 \'.\' 3\n 分钟，可以轻松避免原语的此问题。Misko 演示了 ng-switch 的原始绑定问题。

\n

\n\n

但简而言之，这是由于 Javascript 的原型继承的工作原理造成的。

\n\n

在第二个示例中，每个 内部都有一个原始类型（例如字符串）ngModel。当ngModel每个控制器（每个控制器都在自己的子作用域上）尝试从原始类型中读取时，它们首先查看其父级以查看变量是否存在。如果是，那么他们就会从中读取。然而，当其中一个ngModels 写入该原语时，该原语的新实例就会添加到其范围内。

\n\n

因此，每个input变量首先在仅读取时共享一个公共变量（顶级作用域中的变量），然后在input写入后每个变量都切换为使用独立变量。您可以通过首先输入顶部、父级，然后输入子级来在此小提琴中观看此操作。input

\n\n

Angular 建议避免这种情况，因为读取和写入操作方式之间的不匹配显然会非常令人困惑且容易出错

\n\n

在您的第一个示例中，您正在创建一个data具有 property 的对象message。在这种情况下，读取的工作方式就像使用原语一样 - 它会在父范围内查找具有该属性的对象，并从该对象中读取（如果存在）。但这次写入的工作方式与读取相同 - 如果存在data具有属性的父对象message，则写入将完成到该对象的属性。

\n\n

因此，当您使用点表示法时，阅读和写作的行为一致，正如您在这个小提琴中看到的那样

\n