AngularJS 中范围原型/原型继承的细微差别是什么？

快速回答：
子作用域通常从其父作用域原型继承，但并非总是如此。该规则的一个例外是带有 scope: { ... } 的指令——这会创建一个在原型上不继承的“隔离”范围。创建“可重用组件”指令时经常使用此构造。

至于细微差别，范围继承通常是直截了当的......直到您需要在子范围中进行2路数据绑定（即，表单元素，ng-model）。如果您尝试从子作用域内绑定到父作用域中的原语（例如，数字、字符串、布尔值），那么 Ng-repeat、ng-switch 和 ng-include 可能会绊倒您。它不像大多数人期望的那样工作。子作用域拥有自己的属性，该属性隐藏/隐藏同名的父属性。您的解决方法是

为您的模型在父级中定义对象，然后在子级中引用该对象的属性： parentObj.someProp 使用 $parent.parentScopeProperty （并非总是可能，但比 1. 在可能的情况下更容易）在父范围上定义一个函数，并且从孩子那里打电话（并不总是可能的）

新的 AngularJS 开发人员通常没有意识到 ng-repeat、ng-switch、ng-view、ng-include 和 ng-if 都创建了新的子作用域，因此当涉及到这些指令时，问题通常会出现。 （有关问题的快速说明，请参阅 this example。）

遵循 always have a '.' in your ng-models 的“最佳实践”（观看 3 分钟）可以轻松避免原语的这个问题。 Misko 演示了 ng-switch 的原始绑定问题。

有一个 '。'在您的模型中将确保原型继承发挥作用。所以，使用

<input type="text" ng-model="someObj.prop1">

<!--rather than
<input type="text" ng-model="prop1">`
-->

长答案

JavaScript 原型继承

也放在 AngularJS wiki 上： https://github.com/angular/angular.js/wiki/Understanding-Scopes

首先对原型继承有一个扎实的理解很重要，特别是如果您来自服务器端背景并且您更熟悉类继承。所以让我们先回顾一下。

假设 parentScope 具有属性 aString、aNumber、anArray、anObject 和 aFunction。如果 childScope 原型继承自 parentScope，我们有：

https://i.stack.imgur.com/aTAGg.png

（请注意，为了节省空间，我将 anArray 对象显示为具有三个值的单个蓝色对象，而不是具有三个单独的灰色文字的单个蓝色对象。）

如果我们尝试从子作用域访问定义在 parentScope 上的属性，JavaScript 会先在子作用域中查找，而不是找到该属性，然后在继承的作用域中查找，然后找到该属性。 （如果它没有在 parentScope 中找到该属性，它将继续原型链......一直到根范围）。所以，这些都是真的：

childScope.aString === 'parent string'
childScope.anArray[1] === 20
childScope.anObject.property1 === 'parent prop1'
childScope.aFunction() === 'parent output'

假设我们然后这样做：

childScope.aString = 'child string'

不参考原型链，在 childScope 中添加了一个新的 aString 属性。这个新属性隐藏/隐藏同名的 parentScope 属性。当我们在下面讨论 ng-repeat 和 ng-include 时，这将变得非常重要。

https://i.stack.imgur.com/OyVPW.png

假设我们然后这样做：

childScope.anArray[1] = '22'
childScope.anObject.property1 = 'child prop1'

查询原型链是因为在 childScope 中找不到对象（anArray 和 anObject）。在 parentScope 中找到对象，并且在原始对象上更新属性值。没有向 childScope 添加新属性；不会创建新对象。 （请注意，在 JavaScript 中，数组和函数也是对象。）

https://i.stack.imgur.com/2QceU.png

假设我们然后这样做：

childScope.anArray = [100, 555]
childScope.anObject = { name: 'Mark', country: 'USA' }

不参考原型链，并且子作用域获得了两个新的对象属性，它们隐藏/隐藏了具有相同名称的 parentScope 对象属性。

https://i.stack.imgur.com/hKetH.png

要点：

如果我们阅读childScope.propertyX，而childScope有propertyX，那么原型链就不用参考了。

如果我们设置 childScope.propertyX，原型链就不会被查询。

最后一种情况：

delete childScope.anArray
childScope.anArray[1] === 22  // true

我们先删除了 childScope 属性，然后当我们再次尝试访问该属性时，会查询原型链。

https://i.stack.imgur.com/56uoe.png

角度范围继承

竞争者：

下面创建了新的作用域，并且继承了原型：ng-repeat、ng-include、ng-switch、ng-controller、directive with scope: true、directive with transclude: true。

以下创建了一个不继承原型的新范围：具有范围的指令：{ ... }。这会创建一个“隔离”范围。

请注意，默认情况下，指令不会创建新范围——即，默认值为 scope: false。

ng-包括

假设我们的控制器中有：

$scope.myPrimitive = 50;
$scope.myObject    = {aNumber: 11};

在我们的 HTML 中：

<script type="text/ng-template" id="/tpl1.html">
<input ng-model="myPrimitive">
</script>
<div ng-include src="'/tpl1.html'"></div>

<script type="text/ng-template" id="/tpl2.html">
<input ng-model="myObject.aNumber">
</script>
<div ng-include src="'/tpl2.html'"></div>

每个 ng-include 都会生成一个新的子作用域，其原型继承自父作用域。

https://i.stack.imgur.com/ziDfx.png

在第一个输入文本框中键入（例如“77”）会导致子作用域获得一个新的 myPrimitive 作用域属性，该属性隐藏/隐藏同名的父作用域属性。这可能不是您想要/期望的。

https://i.stack.imgur.com/7l8dg.png

在第二个输入文本框中键入（例如“99”）不会产生新的子属性。因为 tpl2.html 将模型绑定到对象属性，所以当 ngModel 查找对象 myObject 时，原型继承就会启动——它在父范围内找到它。

https://i.imgur.com/ZqqloMS.png

如果我们不想将模型从原始模型更改为对象，我们可以重写第一个模板以使用 $parent：

<input ng-model="$parent.myPrimitive">

在此输入文本框中键入（例如“22”）不会产生新的子属性。该模型现在绑定到父范围的属性（因为 $parent 是引用父范围的子范围属性）。

https://i.stack.imgur.com/kd8pj.png

对于所有范围（原型或非原型），Angular 总是通过范围属性 $parent、$$childHead 和 $$childTail 跟踪父子关系（即层次结构）。我通常不会在图表中显示这些范围属性。

对于不涉及表单元素的场景，另一种解决方案是在父作用域上定义一个函数来修改原语。然后确保孩子总是调用这个函数，由于原型继承，这个函数对孩子范围是可用的。例如，

// in the parent scope
$scope.setMyPrimitive = function(value) {
     $scope.myPrimitive = value;
}

这是使用这种“父函数”方法的 sample fiddle。 （小提琴是作为这个答案的一部分写的：https://stackoverflow.com/a/14104318/215945。）

另请参阅 https://stackoverflow.com/a/13782671/215945 和 https://github.com/angular/angular.js/issues/1267。

ng-开关

ng-switch 范围继承就像 ng-include 一样工作。因此，如果您需要将 2 路数据绑定到父范围内的原语，请使用 $parent，或者将模型更改为对象，然后绑定到该对象的属性。这将避免子范围隐藏/隐藏父范围属性。

另请参阅AngularJS, bind scope of a switch-case?

ng-重复

Ng-repeat 的工作方式略有不同。假设我们的控制器中有：

$scope.myArrayOfPrimitives = [ 11, 22 ];
$scope.myArrayOfObjects    = [{num: 101}, {num: 202}]

在我们的 HTML 中：

<ul><li ng-repeat="num in myArrayOfPrimitives">
       <input ng-model="num">
    </li>
<ul>
<ul><li ng-repeat="obj in myArrayOfObjects">
       <input ng-model="obj.num">
    </li>
<ul>

对于每个项目/迭代，ng-repeat 创建一个新范围，该范围在原型上继承自父范围，但它还将项目的值分配给新子范围上的新属性。 （新属性的名称是循环变量的名称。）以下是 ng-repeat 的 Angular 源代码实际上是：

childScope = scope.$new();  // child scope prototypically inherits from parent scope
...
childScope[valueIdent] = value;  // creates a new childScope property

如果 item 是基元（如在 myArrayOfPrimitives 中），则本质上将值的副本分配给新的子范围属性。更改子作用域属性的值（即，使用 ng-model，因此使用子作用域 num）不会更改父作用域引用的数组。所以在上面的第一个 ng-repeat 中，每个子作用域都有一个独立于 myArrayOfPrimitives 数组的 num 属性：

https://i.stack.imgur.com/nLoiW.png

这个 ng-repeat 不起作用（就像你想要/期望的那样）。键入文本框会更改灰色框中的值，这些值仅在子范围内可见。我们想要的是输入影响 myArrayOfPrimitives 数组，而不是子范围的原始属性。为此，我们需要将模型更改为对象数组。

因此，如果 item 是一个对象，则将对原始对象（而不是副本）的引用分配给新的子范围属性。更改子范围属性的值（即，使用 ng-model，因此使用 obj.num）确实更改了父范围引用的对象。所以在上面的第二个 ng-repeat 中，我们有：

https://i.stack.imgur.com/QSjTJ.png

（我将一条线涂成灰色，以便清楚它的去向。）

这按预期工作。在文本框中键入会更改灰色框中的值，这些值对子范围和父范围都可见。

另请参阅 Difficulty with ng-model, ng-repeat, and inputs 和 https://stackoverflow.com/a/13782671/215945

ng-控制器

使用 ng-controller 嵌套控制器会导致正常的原型继承，就像 ng-include 和 ng-switch 一样，因此适用相同的技术。但是，“两个控制器通过 $scope 继承共享信息被认为是一种不好的形式”——http://onehungrymind.com/angularjs-sticky-notes-pt-1-architecture/ 应该使用服务在控制器之间共享数据。

（如果您真的想通过控制器范围继承共享数据，则无需执行任何操作。子范围将有权访问所有父范围属性。另请参阅 Controller load order differs when loading or navigating）

指令

default (scope: false) - 该指令不创建新范围，因此这里没有继承。这很容易，但也很危险，因为例如，指令可能认为它正在作用域上创建新属性，而实际上它正在破坏现有属性。对于编写旨在作为可重用组件的指令，这不是一个好的选择。 scope: true - 该指令创建一个新的子范围，该子范围在原型上继承自父范围。如果多个指令（在同一个 DOM 元素上）请求一个新范围，则只会创建一个新的子范围。因为我们有“正常”的原型继承，这就像 ng-include 和 ng-switch，所以要小心 2-way 数据绑定到父作用域原语，以及子作用域隐藏/隐藏父作用域属性。 scope: { ... } - 该指令创建一个新的隔离/隔离范围。它不是原型继承的。这通常是创建可重用组件时的最佳选择，因为该指令不会意外读取或修改父范围。但是，此类指令通常需要访问一些父范围属性。对象哈希用于在父作用域和隔离作用域之间建立双向绑定（使用'='）或单向绑定（使用'@'）。还有 '&' 绑定到父范围表达式。因此，这些都创建了从父范围派生的本地范围属性。请注意，属性用于帮助设置绑定——您不能只在对象哈希中引用父范围属性名称，您必须使用属性。例如，如果您想在隔离范围内绑定到父属性 parentProp：