（译）理解AngularJS中的Scopes

最新推荐文章于 2024-04-29 15:00:53 发布

justforuse

最新推荐文章于 2024-04-29 15:00:53 发布

阅读量614

点赞数

分类专栏： AngularJS 文章标签： angularjs 继承

AngularJS 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

（初次翻译，有些地方翻译的不准确，还请对照原文理解：https://github.com/angular/angular.js/wiki/Understanding-Scopes）

概要

AngularJS中，子作用域通常是原型继承自他的父作用域。这个规则的一个例外就是使用了scope:{...} 的指令——这个创建了一个“隔离”的作用域，不是以原型继承的方式（以及使用了transclusion的指令）。这个结构通常用于创建“可复用的组件”指令。在指令中，默认父作用域直接被使用。这意味着你在指令中做的来自于父作用域的更改也会在父作用域中生效。如果你设置了scope:true （不是scope:{...}），那么原型继承就会被应用到该指令上。

作用域继承通常都是很直接明了的，并且你通常甚至不知道它发生了…直到你在子作用域应用了双向数据绑定（也就是ng-model）到定义在父作用域中原始类型（例如：数字，字符串，布尔值）。这种情况他不像大多数人认为的那样生效。原因就是子作用域生成了自己的属性，并且隐藏/覆盖了父作用域中的同名属性。这不是AngularJS做的，而是JavaScript中原型继承的工作方式。年轻的AngularJS开发者通常未意识到ng-repeat， ng-switch， ng-view， ng-include和ng-if 都会创建一个新的子作用域，所以问题经常出现当这些指令被使用的时候（看一个例子对这个问题有个快速认识）。

这个原始数据类型的问题可以很简单避免，通过使用“最佳实践”：总是使用.运算符在ng-models中，看三分钟很值得，他演示了一个ng-switch绑定原始数据类型的问题.

使用.在数据模型中将会确保原型继承生效，因此，使用
<input type="text" ng‐model="someObj.prop1">而不是
<input type="text" ng‐model="prop1">。

如果你实在是想使用或者需要使用原始数据类型的话，这有两种解决方法：

使用$parent.parentScopeProperty在子作用域中，这将会阻止子作用域创建自己的属性。
在父作用域中定义一个方法，并且在子作用域中调用，直接传递原始类型数据给父作用域（不总是一个可行的方式）。

JavaScript中的原型继承

首先需要有一个清晰牢固的理解对于JavaScript的原型继承，特别如果你是从后端转来的并且你更熟悉类继承。

我们先来回复一遍：
假设父作用域拥有属性aString, aNumber, aArray, anObject, and aFunction。如果子作用域原型继承自父作用域，那么我们就有：

这里写图片描述

（注意存储空间，我显示anArray对象以单个蓝色对象，有着3个值，而不是单个蓝色对象有着三个灰色相间隔的灰色字符排版）

如果我们试图从子作用域访问一个定义在父作用域上的属性，JavaScript将会首先在子作用域上查找，如果未找到则查找继承作用域，并且找到了那个属性（如果未在父作用域中找到则继续向上查找原型链，直到根作用域），所以这些表达式的值都是true：

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

如果我们接下来这样做：

childScope.aString = 'child string'

原型链就不在被查询，并且一个新的aString属性就被添加到了子作用域上。这个新的属性隐藏了父作用域上的同名属性。这点非常重要当我们接下来讨论ng-repeat和ng-include的时候。

这里写图片描述

假如我们接下来这么做：

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

这个原型链将被查询因为这些对象（anArray和anObject）没有在子作用域中找到。这些对象在父作用域中找到了并且属性值被更新了在原来的对象上。没有在子作用域上添加新属性，没有新的对象被创建（注意，在JavaScript中数组和方法也是对象）。

这里写图片描述

如果我们接下来这么做：

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

这个原型链没有被查询并且子作用域获得了两个新的对象属性，并且隐藏了父作用域中的同名属性。

这里写图片描述

要点

如果我们读取子作用域中的propertyX，并且子作用域拥有propertyX，那么原型链将不被查询。
如果我们设置子作用域的propertyX属性的话，原型链也不会被查询。

最后一中情况：

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

我们先删除了子作用域的属性，然后我们试图再次访问这个属性，那么原型链将被查询。

这里写图片描述

这里有一个例子你会看到以上的JavaScript原型继承的修改后的例子和他们的结果

AngularJS作用域继承

重点：
- 以下将会创建新的作用域，以原型继承的方式：ng-repeat, ng-include,ng-switch,ng-view,ng-controller,scope:true的指令，transclude:true的指令
- 下面的不会创建原型继承的作用域，scope:{...}的指令，这个创建隔离作用域。

注意，默认情况下指令不会创建新的作用域，也就是说默认的是scope:false。

ng-include

假设我们在自己的控制器中有：

$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都会创建一个新的子作用域，并且原型继承自父作用域。

这里写图片描述

在第一个输入框中输入值（比如77），将会导致子作用域创建一个新的myPrimitive属性，并且隐藏了父作用域的同名属性。这个可能不是你期望的。

这里写图片描述

在第二个输入框中输入值（比如99），这不会导致创建一个新的子属性，因为tpl2.html绑定的是一个对象的属性，原型继承被触发当ngModel查找myObject这个对象的时候，他在父作用域中找到了。

这里写图片描述

我们可以使用$parent重写第一个模板，如果我们不想改变我们的数据模型从一个原始数据类型到一个对象。

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

在这个输入框中输入值（比如22），这个不会导致创建一个新的子属性。这个数据模型现在被绑定到了一个父作用域的属性上（因为$parent是子作用域的属性，它指向了父作用域）。

这里写图片描述

对于所有的作用域（不管是不是原型继承的），AngularJS总是监测父-子作用域（也就是层级），通过作用域属性$parent,$$childHead,$$childTail，我没有在图表中展示。

对于元素没有被引入的情况，另一种解决方式是定义一个方法在父作用域中来修改原始数据类型。然后确保子作用域调用了这个方法，这个在子作用域中会生效的忧郁原型继承

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

这是一个例子使用了父作用域方法

ng-switch

ng-switch作用域继承就像ng-include那样工作，所以如果你需要双向数据绑定一个原始数据类型在父作用域中，使用$parent或者将数据模型改为对象，然后绑定在一个对象的属性上。这将会避免子作用域隐藏父作用域的属性。

参考：http://stackoverflow.com/questions/12405005/angularjs-bind-scope-of-a-switch-case/12414410

ng-repeat

ng-repeat工作的有点不同。假设我们控制器中有：

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

我们的HTML：

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

对于每一个元素，ng-repeat都创建了一个新的作用域，原型继承自父作用域，同时也分配了元素值到一个新的子作用域属性（新属性的名字是变量名称的循环），这是AngularJS的源码中关于ng-repeat的部分：

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

如果元素是原始数据类型（比如在myArrayOfPrimitives中的那样），本质上是一个值的复制到子作用域的属性上，改变子作用域的值（即，使用ng-model绑定子作用域的属性num）不会改变父作用域的数组引用。所以，在第一个ng-repeat中每一个子作用域都有一个num属性，并且独立于myArrayOfPrimitives数组。

这里写图片描述

这个ng-repeat不会生效像我们想要的那样，在Angular1.0.2或者更早的版本中，在输入框中输入值会改变灰色部分的值，并且只在子作用域中可见。在Angular1.0.3+的版本中，在输入框中输入不会有影响（参考Artem的解释），我们想要的是当我们输入值会影响myArrayOfPrimitives数组，不是子作用域的原始数据类型的属性。达到这点，我们需要改变数据模型为一个对象数组。

如果元素是一个对象，一个指向原始对象的引用会被分配到新的自作用域的属性上。改变子作用域中的属性值（也就是使用ng-model绑定obj.num）会改变父作用域中对象的引用。所以在第二个ng-repeat中，我们有：

这里写图片描述

我将一条线标灰所以很清晰的看到发生了什么。

这个将会按照期望的那样工作，在输入框中输入值会改变灰色部分的值，这个对父、子作用域都是可见的。

ng-view

待讨论，不过我认为跟ng-include一样。

ng-controller

嵌套作用域使用ng-controller触发一个普通的原型继承。就像ng-include和ng-switch那样。所以使用一样的技术。但这个被认为一种糟糕的形式对于多个作用域共享数据通过$scope(参考)，而是应该使用service来在控制器之间共享数据。

指令

默认情况：指令不会创建一个新的作用域，所以就不会有原型继承，这个很简单，但也是很危险的。因为指令会认为这是创建一个属性在作用域上，而实际上是清除了一个存在的属性。这不是一个好的选择对于编写一个可复用的组件指令的时候。
scope:true。这个指令创建一个新的子作用域，原型继承自父作用域。如果不止一个指令请求一个新的作用域（在同一个DOM元素上），只有一个新的子作用域被创建，因为我们有原型继承。这个像ng-include和ng-switch那样。所以警惕双向数据绑定父作用域上的原始数据类型。子作用域会隐藏父作用域的属性。
scope:{…}。这个指令会创建一个新的隔离作用域。他不是原型继承。这通常是你最好的选择当创建可复用组建的时候，因为指令不能偶然的读取或者修改父作用域。然而，指令通常需要访问一些父作用域的属性。属性Hash被使用当我们创建双向数据绑定（使用‘=’）或者单向数据绑定（使用“@”）在父作用域和隔离作用域之间。这也有一个“&”来绑定父作用域方法。注意使用属性来建立绑定。你不能指向父作用域的属性名称在对象Hash中。你必须使用属性。举例来说这个不会生效如果你想要绑定父作用域上的属性parentProp在隔离作用域中<div my‐directive>以及scope: { localProp: '@parentProp' }。必须使用属性来指定指令想要绑定父作用域中的哪个属性<div my‐directive the‐Parent‐Prop=parentProp>及scope: { localProp: '@theParentProp'}。

隔离作用域的__proto__指向一个作用域对象。隔离作用域的$parent指向父作用域。所以尽管它是隔离的，并且没有原型继承自父作用域，他也是一个子作用域。

下面的图表我们有：

<my‐directive interpolated="{{parentProp1}}" twowayBinding="parentProp2"> and
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }

并且指定了指令的行为在link function中：

scope.someIsolateProp = "I'm isolated"

这里写图片描述

最后注意一点：使用attrs.$observe('attr_name', function(value) { ... })在link funciton中来获取隔离作用域中使用@记号的插值。例如，如果我们有如下在link function中：attrs.$observe('interpolated', function(value){ ... })value值将被设置为11（scope.interpolatedProp在link function中是未定义的）。相反，scope.twowayBindingProp 是被定义的在link function中，因为它使用了=记号。

更多参考

transclude:true。这个指令创建一个新的“嵌入”作用域，原型继承自父作用域。

从1.3版本开始，隔离作用域是嵌入作用于的$parent。详见：http://stackoverflow.com/questions/17788289/why-ng-transcludes-scope-is-not-a-child-of-its-directives-scope-if-the-direc

总结

有四种作用域类型：
1. 普通的原型继承作用域：ng-include, ng-switch, ng-controller, scope:true的指令。
2. 普通的原型继承作用域带有复制/分配。ng-repeat,每一个迭代都创建一个新的子作用域，并且新的子作用域总是创建一个新的属性。
3. 隔离作用域。scope:{…}的指令。这个不是原型继承的，但是”=”,”@”,”&”提供了一种机制来访问父作用域中的属性值，通过属性（attributes）.
4. 嵌套作用域。transclude:true的指令。这个也是原型继承，但是他通常是一个隔离作用域的兄弟作用域。

对于所有的作用域（无论是否继承）。AngularJS总是监测父-子作用域关系（也就是层级关系）。通过$parent，$$childHead和$$childTail。