AngularJS作用域详解介绍-百分百源码网

AngularJS作用域详解介绍

发布时间：01/15 来源：浏览：关键词：

AngularJS作用域我们又讲到了变量的作用域名了，下面我们来看在AngularJS作用域是怎么样了，今天就和小编一起来看看关于AngularJS作用域详解介绍吧。

一、概要

AngularJS中，子作用域（child scope）基本上都要继承自父作用域（parent scope）。

但，事无绝对，也有特例，那就是指令中scope设置项为对象时，即scope:{…}，这将会让指令创建一个并不继承自父作用域的子作用域，我们称之为隔离作用域（isolated scope）。

指令中的scope一共可以有三个值，下面我们再来温习下：

指令之scope

scope: false

默认值，指令不会新建一个作用域，使用父级作用域。

scope: true

指令会创建一个新的子作用域，原型继承于父级作用域。

scope: {…}

指令会新建一个隔离作用域，不会原型继承父作用域。

那么，理解AngularJS中作用域继承有什么用呢？

原因之一就是，有利于我们使用“双向绑定”（也就是在form表单元素中绑定ng-model），例如，在初学AngularJS时，我们常会遇到“双向绑定”不起作用的时候，如下：

<!DOCTYPE html>
    <head>
        <meta charset="utf-8"/>
        <script src="angular.js"></script>
    </head>
    <body ng-app="myApp">
        parent:<input type="text" ng-model="name"/>
        <div ng-controller="TestCtrl">
            child: <input type="text" ng-model="name"/>
        </div>
        <script>
            var app = angular.module('myApp', []);
            app.controller('TestCtrl', function(){});
        </script>
    </body>
</html>

执行上述代码，结果如下：

其实AngularJS的作用域继承与JavaScript的原型继承是一样的逻辑，固，如果想要上述代码实现双向绑定，我们可以利用ng-model绑定对象属性，来达到目的，如下：

<!DOCTYPE html>
    <head>
        <meta charset="utf-8"/>
        <script src="angular.js"></script>
    </head>
    <body ng-app="myApp">
        parent:<input type="text" ng-model="obj.name"/>
        <div ng-controller="TestCtrl">
            child: <input type="text" ng-model="obj.name"/>
        </div>
        <script>
            var app = angular.module('myApp', []);
            app.run(function($rootScope){
                $rootScope.obj = {};
            });
            app.controller('TestCtrl', function(){});
        </script>
    </body>
</html>

执行上述代码，结果如下：

二、JavaScript原型继承

上面已经提到了AngularJS的作用域继承与JavaScript的原型继承是一样儿一样儿的，所以，我们首先来初步温习下JavaScript的原型继承。

假设，我们有父作用域（ParentScope），且其中包含了属性aString、aNumber、anArray、anObject 以及aFunction。

好了，如果现在有一子作用域（ChildScope）继承于这个父作用域（ParentScope），如下所示：

当我们通过ChildScope想访问一个属性时，JavaScript内部是如何为我们查找的呢？

答案：

首先JavaScript会第一时间在当前作用域（如这里的ChildScope）中查找是否有这一属性，如果在当前作用域中没有找到，

那么JavaScript就会沿着原型这条链（如这里的：ChildScope-->ParentScope-->RootScope），一直找下去，倘若在某一父作用域中找到，就返回这个属性值并停止原型链查找；

倘若一直找到根作用域（如这里的RootScope）都没有找到，则返undefined。

故而，下面这些表达式，结果都为true：

childScope.aString === 'parent string' //true

childScope.anArray[1] === 20 //true

childScope.anObject.property1 === 'parent prop1' //true

childScope.aFunction() === 'parent output' //true

好了，假如，我们这么做呢：

childScope.aString = 'child string'
那么只会在childScope中新建一个值为’child string’的aString属性。在这之后，倘若我们还想通过childScope访问parentScope中aString属性时，就束手无策了。

因为childScope已经有了一个aString属性。理解这一点是非常重要的，在我们讨论ng-repeat 和ng-include之前。

接下来，我们再这么做呢：

childScope.anArray[1] = '22'

childScope.anObject.property1 = 'child prop1'
这样会沿着原型链查找的，并改变属性中的值。

为什么呢？

原因就是我们这次赋值的是对象中的属性。

好了，接下来，我们再这么做：

childScope.anArray = [100, 555]

childScope.anObject = {name: 'Mark', country: 'USA'}
这样做的效果，如同上面childScope.aString = ‘child string’一样，不会启动原型链查找。

总结：

1、如果我们读取子作用域的属性时，且该子作用域有这个属性，则不会启动原型链查找；

2、如果我们赋值子作用域的属性时，依然不会启动原型链查找。

EnglishExpression
通过上面的总结，如果我们想让childScope在已有自己的anArray属性后，仍然访问parentScope中的anArray值呢？

哈哈，删除childScope中的anArray属性嘛，如下：

delete childScope.anArray

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

三、Angular作用域继承
在前面“概要”部分已经说到Angular中子作用域基本上都继承自父作用域，但也有例外（scope:{…}指令），但并没有具体说明哪些指令会创建子作用域等，现在归类如下：

创建子作用域，且继承自父作用域

1、 ng-repeat

2、 ng-include

3、 ng-switch

4、 ng-controller

5、 directive (scope: true)

6、 directive(transclude: true)

创建子作用域，但并不继承自父作用域

directive(scope: {…})

不创建作用域

directive(scoep: false)

下面分别看看：

--ng-include--

假设我们有一控制器，内容如下：

module.controller('parentCtrl', function($scope){
$scope.myPrimitive = 50;
$scope.myObject = {aNumber: 11};
});
有HTML代码如下：

代码稍长，请自行打开
因为每个ng-include指令，都会创建一个新的作用域，且继承于父作用域。固，代码中的关系图如下：

在chrome（需加--disable-web-security）下，执行上述代码后，得下：

从执行结果看，符合上面的关系图。

好了，倘若我们在第三个input框中，敲入字符（如77）后，子作用域会创建一个自己的myPrimitive属性，从而阻止原型链查找。

如下所示：

倘若，我们在第四个input框中，输入字符（如99）呢？子作用域会沿着原型链查找并修改，因为在这个input框中，我们绑定的是对象属性。

如下图所示：

如果我们想让第三个input框达到第四个input框的效果，并且不使用对象属性的方法，那么我们可以利用$parent来达到目的。

修改第三个input框的HTML代码：

includ-myPrimitive:<input ng-model="$parent.myPrimitive"/>
好了，这个时候，我们再在第三个input框中输入22时，就会沿着原型链查找了，达到与第四个input框一样的效果（因为$parent是为了让子作用域访问父作用域设置的属性）。

除开$parent，还有$$childHead和$$childTail都是为了子作用和父作用域通信服务的。注意，是所有子作用域哦，所以包括了scope:{…}指令的情况。

--ng-switch--

ng-switch会创建子作用域，效果与上面所述的ng-include一样。倘若，我们想要实现子作用域与父作用域实现双向绑定，就使用$parent或者对象属性。

Demo如下：

代码稍长，请自行打开
执行上述代码，效果如下：

--ng-repeat--

ng-repeat也会创建子作用域，不过与上面讲述的ng-include、ng-switch不同的是，ng-repeat会为每个遍历的元素创建子作用域，且继承自同一父作用域。

好了，下面我们来具体看看，假如，现在我们有一控制器，如下：

module.controller('parentCtrl', function($scope){
$scope.myArrayOfPrimitives = [11, 22];
$scope.myArrayOfObjects = [{num: 101}, {num: 202}];
});
HTML代码如下：

因为，ng-repeat会为每个元素都创建一个子作用域，如上面代码中<li ng-repeat=”num in myArrayOfPrimitives”>，ng-repeat指令会用num，去遍历myArrayOfPrimitives：[11, 22]中的数据，即创建两个继承自父作用域的子作用域。且，在子作用域中会创建自己的属性num，因此，倘若子作用域中的num值变动，肯定不会改变父作用域中myArrayOfPrimitives的相应数据咯。

然而，HTML代码中第二个出现ng-repeat的地方<li ng-repeat=”obj in myArrayOfObjects”>，当子作用域变动时，会影响到父作用域中对应的元素。因为数组myArrayOfObjects：[{…}, {…}]中的元素为对象，固而，遍历myArrayOfObjects中元素时，子作用域赋值的是对象，引用类型嘛，所以子作用域中变动对象属性时，肯定会影响父作用域的相关值咯。

--ng-controller--

ng-controller指令与ng-include、ng-switch一样，即创建子作用域，且继承自父作用域。

--directives--

详情见“初探指令”

需要注意的是，scope为对象的指令（scope:{…}），虽然该类指令的作用域为隔离作用域，但是，它任然可以通过$parent访问父作用域。

EnglishExpression
Demo如下：

代码稍长，请自行打开
执行上述代码，操作如下：

四、总结
有四种类型的子作用域：

1、要继承于父作用域—ng-include, ng-switch, ng-controller, directive(scope: true).

2、要继承于父作用域，但会为每个元素创建一个子作用域—ng-repeat.

3、隔离作用域—directive(scope:{…}).

4、要继承于父作用域，且与任何的隔离作用的指令为兄弟关系—directive(transclude: true).