什么是作用域？

Angular中作用域(scope)是模板以及工作的上下文环境，作用域中存放了应用模型和视图相关的回调行为。作用域是层次化结构的与相关联的DOM结构相对应。作用域可以观察表达式以及传播事件。

  原文: scope is an object that refers to the application model. It is an execution context for expressions. Scopes are arranged in hierarchical structure which mimic the DOM structure of the application. Scopes can watch expressions and propagate events.

作用域的特性

  作用域提供了相关的APIs($watch)来监控模型的状态并且将Angular系统（视图、服务、事件处理器）内部的模型的变化同步到视图。

作用域可以嵌套来控制应用组件对模型属性的访问。嵌套的作用域可以是“父子”关系或者"同级"关系。子作用域可以继承父作用域的属性，相邻作用域是互补可见的。

作用域提供了表达式的上下文环境。例如表达式{{username}}只有在定义了username属性的作用域中才有意义。

作用域作为数据模型

  作用域是连接Angular控制器和视图的中间地带。指令会在模板链接阶段(linking)在作用域中建立对表达式的监控($watch)服务。这样$watch就可以将模型属性的变化情况及时通知给指令从而更新视图。

控制器和指令只能通过作用域连接，不可以直接关联。这样就实现了控制器和视图的解耦。这样就可以实现一套模型绑定多个视图，也提高了前端代码的可测性。

index.html

script.js

1 angular.module('scopeExample', [])

2 .controller('MyController', ['$scope', function($scope) {

3   $scope.username = 'World';

5   $scope.sayHello = function() {

6     $scope.greeting = 'Hello ' + $scope.username + '!';

7   };

8 }]);

上述例子说明了作用域的工作原理：

1. 在MyController控制器中定义了username属性， 并在输入文本控件中绑定了该属性。username被初始化为'World'，这样作用域会通知文本框中并在文本框预填入初始值。

2. 同样控制器在作用域中定义了sayHello行为，并通过ng-click注册到按钮的点击事件。当用户在input中输入其他值时，会通过作用域更新username属性，从而改变sayHello的结果。

运行结果：

{{greeting}}表达式的工作原理如下：

1. 先找到{{greeting}}表达式所在DOM相关的作用域。在此例中为MyController中的$scope.

2. 在作用域中找到greeting属性并替换{{greeting}}, 既而更新了视图。

scope及其属性提供了用来展现视图的数据。（原文： The scope is the single source-of-truth for all things view related.）

从测试的角度考虑， 视图与控制器分离是必要的， 这样我们就可以单独测试视图后面的行为而不用考虑视图的细节。

 it('should say hello', function() {

   var scopeMock = {};

   var cntl = new MyController(scopeMock);

   // Assert that username is pre-filled

   expect(scopeMock.username).toEqual('World');

   // Assert that we read new username and greet

   scopeMock.username = 'angular';

   scopeMock.sayHello();

   expect(scopeMock.greeting).toEqual('Hello angular!');

 });

作用域的层次化结构

   每个Angular应用都有一个根作用域(root scope), 在根作用域下可以有多个子作用域。一些指令(directives)也会创建子作用域。 新的作用域会被添加到相应的父作用域上，这样就形成了与DOM视图相平行的树形结构。

让我们通过一个具体的例子来理解：

 <div class="show-scope-demo">

   <div ng-controller="GreetController">

     Hello {{name}}!

   </div>

   <div ng-controller="ListController">

     <ol>

       <li ng-repeat="name in names">{{name}} from {{department}}</li>

     </ol>

   </div>

 </div>

输出：

   对应的DOM结构:


我们可以注意到Angular会自动给绑定作用域的DOM元素加上"ng-close"类， CSS文件中给ng-scope类的元素加了高亮显示。为<li>创建子作用域是必要的，因为每个<li>都会有{{name}}表达式指向自己的name属性。{{department}}中department则继承根作用域$rootScope.department属性。

获取DOM的作用域

      作用域是与视图相关联的，我们可以在debug的时候通过api获取绑定到视图的作用域。根作用域(root scope）定义在含有ng-app指令的DOM元素上。通常ng-app放在<html>元素中， 当然ng-app也可以放在任何DOM元素上，例如我们只想局部视图被angular控制。

在Chrome中我们只需右击然后选择“审查元素”选项进入调试界面。

通过$0便可获得当前选中的DOM元素。

通过angular.element($0).scope()或者$scope可以获得当前元素对应的作用域。

作用域事件传播

    类似DOM事件，我们可以在作用域间传播事件。事件可以被广播（$broadcast）到子作用域或者向上传播到父作用（$emit）域中。

让我们看具体的例子：

 <div ng-controller="EventController">

   Root scope <tt>MyEvent</tt> count: {{count}}

   <ul>

     <li ng-repeat="i in [1]" ng-controller="EventController">

       <button ng-click="$emit('MyEvent')">$emit('MyEvent')</button>

       <button ng-click="$broadcast('MyEvent')">$broadcast('MyEvent')</button>

       <br>

       Middle scope <tt>MyEvent</tt> count: {{count}}

       <ul>

         <li ng-repeat="item in [1, 2]" ng-controller="EventController">

           Leaf scope <tt>MyEvent</tt> count: {{count}}

         </li>

       </ul>

     </li>

   </ul>

 </div>  
1 angular.module('eventExample', [])

2 .controller('EventController', ['$scope', function($scope) {

3   $scope.count = 0;

4   $scope.$on('MyEvent', function() {

5     $scope.count++;

6   });

7 }]);

8

在HTML模板中，我们通过ng-click注册了点击事件监听，分别来向子作用域广播和向上传播MyEvent时间，在控制器我们通过$scope.$on('MyEvent')监听事件。

运行结果如下：

 作用域的生命周期

通常浏览器接收一个事件时会执行一段Javascript回调执行相关的处理，等回调执行完会自动更新DOM继续等待处理新事件。当浏览器调用的js代码不在angular执行上下文中，angular将不会注意模型的更改。我们可以通过$apply方法，让模型的更改在angular的上下文中进行。也就是说只有在$apply过程中的模型更改才会被angular甄别。例如,某个指令监听DOM事件(比如ng-click),必须在$apply方法中执行angular表达式。

在表达式执行完成后,$apply会执行$digest。在$digest过程中，作用域会检查所有$watch的表达式，比较表达式的当前状态和上一次状态。这种脏数据(dirty data)的检查是异步的。也就是说给模型属性赋予新的值时，$watch不会立即被通知，通知$watch发生在$digest阶段。这个短暂的延迟是有原因的，angular会批量通知$watch模型的状态情况，并且保证同时只有一个$watch在进行。如果$watch改变了模型的状态，会再强行触发一次$digest过程：

1. 创建 - 更作用域会在应用启动时通过注入器创建并注入。在模板连接阶段，一些指令会创建自己的作用域。

2.  注册观察者 - 在模板连接阶段，将会注册作用域的监听器。这也监听器被用来识别模型状态改变并更新视图。

3.  模型状态改变 - 更新模型状态必须发生在scope.$apply方法中才会被观察到。Angular框架封装了$apply过程，无需我们操心。

4.  观察模型状态 - 在$apply结束阶段，angular会从根作用域执行$digest过程并扩散到子作用域。在这个过程中被观察的表达式或方法会检查模型状态是否变更及执行更新。

5.  销毁作用域

当不再需要子作用域时，通过scope.$destroy()销毁作用域，回收资源。

作用域和指令

在编译(compiling)阶段,angular编译器会将DOM模板和指令匹配绑定。指令一般可分为以下两类：

1. 观察指令(Observing directives), 例如表达式， 通过$watch方法注册监听。这类指令在表达式变化时会被通知从而更新视图。

2. 监听器指令(Listener directives)， 例如ng-click会在DOM元素上注册监听事件。DOM事件会触发指令执行相关的表达式或者通过$apply更新视图。

当接收到外部事件时（用户动作，计时器或者ajax相关的事件），相关作用域的表达式必须通过$apply方法执行，确保所有监听器状态被正确的更新。

哪些指令会创建作用域？

  在大多数情况下，指令不会自行创建自己的作用域。但一些指令，例如ng-controller, ng-repeat等会创建子作用域和DOM绑定。我们可以通过angular.element(aDomElement).scope() 获取和DOM元素相关联的作用域。

控制器和作用域

  控制器和作用域可以通过以下方式交互：

   1. 控制器通过作用域暴露给模板相关的行为。

2. 控制器定义可以操作模型的方法。

3. 控制器可以通过$watch注册监听模型的状态。这些watch会立即在控制器方法执行后被触发执行。

angular会自动检查作用域内模型状态的变更，这些检查并不触及DOM操作，而只是检查作用域的属性。

出于对性能的考虑，对不同数据类型（引用、集合、 值）的检查会有不同的策略(参考图中的决策树)：

检查引用 - 当表达式返回一个新的对象或者数组时，scope.$watch(watchExpression, listener)不会再具体对象里面的具体内容，而是比较引用是否指向新的内存地址。

检查集合的内容 - 当对集合类型的数据增加、删除元素或者排序时，$scope.$watchCollection(watchExpression, listener)会检查集合中的元素。对集合中内容的检查是Shallow的， 即不会检查嵌套在集合中的集合或者对象。这种策略试图减少对内存资源的消耗。

检查值 - 根据模型的数据结构，scope.$watch (watchExpression, listener, true)深度遍历数据结构中的每个域的值，这种策略是最强大的但需要相当大的资源开销。

与浏览器事件的交互

   我们将结合下图分析angular与浏览器事件交互的工作原理：

1. 浏览器的事件环路会一直等待事件发生，这里的事件包括用户的交互，计时器，网络事件等。

2. 事件会触发监听器在js上下文环境中调用相关回调方法更新DOM结构。

3. 回调结束后，浏览器会脱离js上下文环境，基于DOM的变动重新渲染视图。

angular在以上的Javascript流程中加入了自己的事件处理机制，把js分成了传统的js上下文和angular执行的上下文。angular中的操作会得益于angular的数据绑定机制、异常处理和属性监听等框架特性。我们也可以通过$apply进入angular的执行上下文环境。

在大多数情况下(控制器、服务)，angular会自动给我们调用$apply处理事件。除非是实现自定义的事件及回调或者是与第三方库结合使用时才会显示调用$apply进入angular上下文环境。$apply工作步骤如下:

1. 通过调用scope.$apply(stimulusFn)进入angular上下文环境，stimulusFn为希望在angular上下文中执行的代码。

2. 通常stimulusFn用来改变应用的状态。

3. angular进入$digest环路，$digest环路包括两个子循环分别处理$evalAsync队列和$watch列表。$digest会持续迭代直到$evalAsync队列清空并且$watch列表中没有任何状态更新。

4. $evalAsync队列被用来调度图中右半部分渲染DOM之前的子任务。

5. $watch列表中包含了上一次迭代后变化的表达式。当相关的模型变化是，$watch会更新表达式的值并更新视图。

6. 当$digest循环终止即离开Angular和Javascript的上下文环境，浏览器会随之更新视图。

基于上述原理我们详解一下"Hello World"例子中的数据绑定是怎么实现的:

1. 在angular编译阶段：

- ng-model和input指令在<input>控件中建立了"keydown"事件的监听器

- angular通过(interpolation)建立$watch对name属性的跟踪

2. 在运行阶段：

- 键入’x‘ 即触发keydown事件, input指令会捕获输入的变化调用$apply("name = 'x'"),更新模型数据。

- 更新完成后进入$digest循环，$watch列表检测到name属性发生了变化并通知interpolation，更新DOM视图。

- angular退出运行上下文，从而退出了keydown事件和与之相关的js上下文环境。

- 浏览器检测到DOM变化重新展现视图。

AngularJS讲义 - 作用域的更多相关文章

  1. AngularJS Scope(作用域)

    1. AngularJS Scope(作用域) Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个对象,有可用的方法和属性. Sc ...

  2. 理解AngularJS的作用域Scope

    AngularJS中,子作用域一般都会通过JavaScript原型继承机制继承其父作用域的属性和方法.但有一个例外:在directive中使用scope: { ... },这种方式创建的作用域是一个独 ...

  3. 理解angularJS中作用域$scope

    angularJS中作用域是什么 作用域(scope)是构成angularJS应用的核心基础,在整个框架中都被广泛使用,因此了解它如何工作是非常重要的 应用的作用域是和应用的数据模型相关联的,同时作用 ...

  4. AngularJS学习之旅—AngularJS Scope作用域(五)

    1.AngularJS Scope(作用域) Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个对象,有可用的方法和属性. Sco ...

  5. angularJs的作用域和依赖注入

    一.angularJs的作用域 &scope这是局部作用域,先在局部作用域中找,如果没有就在全局作用域中找  &rootScope这是全局作用域 <!DOCTYPE HTML&g ...

  6. AngularJS笔记---作用域和控制器

    什么是作用域. 什么是控制器, 作用域包含了渲染视图时所需的功能和数据,它是所有视图的唯一源头.可以将作用域理解成试图模型(ViewModel). 作用域之间可以是包含关系也可以是独立关系.可以通过设 ...

  7. AngularJS–Scope(作用域)

    点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/ Scope Scope 是一个应用程序的模块的对象.它是表达式的执行上下文.它充斥在DO ...

  8. AngularJs 隔离作用域

    初学NG,有诸多的不解,今天看了一篇文章,原文地址:https://segmentfault.com/a/1190000002773689#articleHeader0 ,本文运行的代码也出处此. 里 ...

  9. AngularJS讲义-控制器

    在Angular中,控制器(Controller)就是基于JavaScript的构造方法,主要用来构造模型并建立模型和视图之间的数据绑定.控制器里面定义了应用程序的逻辑和行为. 通过ng-contro ...

随机推荐

  1. HDU 4707 DFS

    Problem Description One day, Lin Ji wake up in the morning and found that his pethamster escaped. He ...

  2. Python自动化之异常处理

    1 异常基本结构 try: pass except Exception,ex: pass 2 异常种类 AttributeError 试图访问一个对象没有的树形,比如foo.x,但是foo没有属性x ...

  3. 4.6---找二叉树中序后继（CC150）

    因为,没有重复值,所以只需要做一个标记就OK了. public class Successor { static boolean flag = false; static int result = 0 ...

  4. mysql 数据库字符集的指定

    create database mydb default character set utf8 default collate utf8_general_ci;

  5. apache poi 生成excel

    ExcelBuilder.Java package com.coracle.yk.xmanager.util.poi; import com.coracle.yk.xframework.util.Bl ...

  6. python脚本-开机自动联网

    办公室的电脑开机之后,需要打开浏览器登录校园用户认证网页,输入用户名密码登录认证之后才能联网,每次都这样搞很麻烦,写了个Python脚本自动完成这个工作. onStartup.py #file:onS ...

  7. Python 列表元素排重uniq

    # -*- coding: gbk -*- def uniq(ls): lsCopy=[e for e in ls] for i in xrange(1,len(ls)): for j in xran ...

  8. js的工作原理

    JavaScript就是所谓的客户端脚本语言,是一种在互联网浏览器(浏览器也称为Web客户端,因为它连接到Web服务器上,以下载页面)内部运行的计算机编程语言. 也就是说,如果一个网页里有js代码,那 ...

  9. SQL Server常用命令

    1.DECLARE DECLARE命令用于声明一个或多个局部变量.游标变量或表变量. 注:如果定义的变量是字符型,应该指定data_type表达式中其最大长度,否则系统认为其长度为1. declare ...

  10. 安装courier-authlib找不到mysqlclient.so文件

    使用configure配置的时候使用 --with-authmysql指明libmysqlclient.so的存放位置即可