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中应始终有一个圆点，因为在中使用基元ngModel是Angular中常见的错误来源。

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

通过遵循始终具有“’
”的“最佳实践”，可以很容易地避免使用基元出现此问题。在您的ng模型中
-观看3分钟值得。Misko演示了ng-switch的原始绑定问题。

简而言之，这是由于Javascript的原型继承是如何工作的。

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

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

Angular建议避免这种情况，因为读写操作之间的不匹配很容易造成混淆，并且容易出错

在第一个示例中，
您将创建一个data带有属性的对象message。在这种情况下，读取的工作方式就像使用基元一样，它看起来是在父作用域上找到具有该属性的对象，然后从那里读取。但是这次写入与读取的工作方式相同-
如果有一个data具有属性的父对象，message则写入该对象的属性。

所以， 当你使用点符号，始终读取和写入的行为 ，你可以看到在这个小提琴