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

在任何输入框中键入一个值将更新所有其他输入框。所以，我认为这里发生的是 Controller 外部的第一个 ng-model 声明将输入元素值绑定(bind)到根范围中的 data.message 模型。我不明白如何ng-controller 中的绑定(bind)然后从根范围读取值，为什么插入 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 中推荐的做事方式。最佳实践是在 ngModel 中应该始终有一个点，因为在 ngModel 中使用基元是 Angular 中常见的错误来源。

这在 Angular's understand scopes document 中有详细讨论。 :

This issue with primitives can be easily avoided by following the "best practice" of always have a '.' in your ng-models – watch 3 minutes worth. Misko demonstrates the primitive binding issue with ng-switch.

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

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

因此每个 input 首先共享一个公共(public)变量(在你的顶级作用域中的那个)，当只被读取时，然后每个 input 切换到使用一个独立的变量一旦被写入。您可以观看实际操作 in this fiddle首先输入 top、parent、input，然后输入 children。

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

在您的第一个示例中，您将创建一个对象data，其属性为message。在这种情况下，读取工作就像使用原语一样——它会在父作用域中查找具有该属性的对象，如果存在则从中读取。但这一次写入的工作方式与读取相同 - 如果有一个父对象 data 具有属性 message 然后写入到对象的属性。

因此，当您使用点符号时，阅读和写作行为一致如您所见in this fiddle