在角范围内的继承 [英] Scope inheritance in Angular

问题描述

我是新来的角，所以我试图按照教程，只是没有得到it.What混淆我是点符号：

I'm new to Angular, so I'm trying to follow tutorial and just don't get it.What confuses me is the dot notation:

<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-模型声明外控制器具有约束力的输入元素值在根范围内的data.message模式。我不明白怎么 NG-控制器里面的绑定，然后从根范围内读值，为什么插入 NG-控制器内的值范围将在该范围以外的输入框中显示呢？

Typing a value inside any of the input boxes will update all the other input boxes. So, what I think that is going on here is that the first ng-model declaration outside controllers is binding the input element value to the data.message model in the root scope.I don't understand how the bindings inside ng-controller are then reading the value from the root scope, and why values inserted inside ng-controller scope will be shown in a input box outside that scope?

此外，如果数据。被删除

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

这行为是走了，怎么来的？

that behavior is gone, how come?

推荐答案

您第一个例子是推荐的方法做事情的角度。最好的做法是，应该永远是你的 ngModel 个点作为一个 ngModel 是一个普遍使用的原语在角的错误的来源。

Your first example is the recommended way to do things in Angular. The best practice being that there should always be a dot in your ngModels as using primitives in an ngModel is a common source of bugs in Angular.

这是在长度角度的理解范围文档讨论：

这与原语的问题可以按照很容易地避免
  始终有一个'。在NG-车型 - 3腕表
  值得一分钟。 MISKO演示与原始结合问题
  NG-开关。

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的原型继承是如何工作的。

But in short this is due to how Javascript's prototypal inheritance works.

在你的第二个例子你有一个基本类型 - 为内部的每个示例 - ngModel 的字符串。当 ngModel 中的每个控制器（各在自己的子作用域）尝试为从他们希望自己的父母基本类型读先看看变量是存在的。如果是则他们从中读取。然而，当其中一个 ngModels 写以原始人那么原始的一个新的实例在其上添加的范围。

In your second example you have a primitive type - a string for example- inside each ngModel. When the ngModel in each controller (each on their own child scopes) tries to read from a primitive type they look to their parents first to see if the variable is there. If it is then they read from it. However when one of the ngModels writes to that primitive then a new instance of the primitive is added on it's scope.

因此​​，每个输入股第一公共变量（一个在你的上面范围），当只有被读取，然后在每个输入切换到一旦它的写入使用一个独立的变量。您可以在行动在顶部，父母，<$ C $此琴通过第一打字看这个C>输入，然后在孩子们。

Thus each input shares a common variable (the one on your top scope) at first, when only being read from, and then each input switches to using an independent variable once it's written to. You can watch this in action in this fiddle by first typing in the top, parent, input and then in the children.

建议角之间，因为阅读和写作是如何运作的可以清楚地是非常混乱且容易出错的不匹配避免这种

Angular recommends avoiding this since the mismatch between how reading and writing operate can clearly be very confusing and error prone

在您的第一个例子你是不是有一个属性信息创建一个对象数据 。在这种情况下，阅读的作品就像一个primitive-看起来找到与父作用域属性，对象，并从中读取，如果它的存在。但是，这一次写的工作方式相同reading-如果有一个父对象数据财产的消息然后写完成对象的属性。

In your first example you're instead creating an object data with a property message. In this case reading works just like with a primitive- it looks to find that object with that property on the parent scope and reads from it if it's there. But this time writing works the same way as reading- if there is a parent object data with property message then the write is done to the object's property.

因此​​，当你使用点符号，读，写的行为始终正如你所看到的在这个小提琴

So, when you use dot notation, reading and writing act consistently as you can see in this fiddle

这篇关于在角范围内的继承的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！