AngularJS——作用域

June. 24, 2015

AngularJS 2都出来了,我还开始接触AngularJS 1.4.0
《AngularJS权威教程》读书笔记

作用域($scope)

应用的作用域是和应用的数据模型相关联的,同时作用域也是表达式执行的上下文。$scope对象时定义应用业务逻辑、控制器方法和视图属性的地方。

作用域是视图和控制器之间的桥梁。
应用将视图渲染并呈现给用户之前,视图中的模板会和作用域进行连接,然后应用会对DOM进行设置以便将属性变化通知给AngularJS。

作用域是应用状态的基础。基于动态绑定,我们可以依赖视图在修改数据时立刻更新$scope,也可以依赖$scope在其发生变化时立刻重新渲染视图。

视图和$scope

AngularJS启动并生成视图时,会将根 ng-app 元素同$rootScope进行绑定。$rootScope是所有$scope对象的最上层。
AngularJS不会对不包含AngularJS特殊声明的元素进行任何处理。

我们可以在AngularJS应用的模板中使用多种标记,包括:

  • 指令:将DOM元素增强为可复用的DOM组件的属性或元素
  • 值绑定:模板语法可以将表达式绑定到视图上
  • 过滤器:可以在视图中使用的函数,用来进行格式化
  • 表单控件:用来检验用户输入的控件

作用域基本功能

  1. 提供观察者以监视数据模型的变化
  2. 可以将数据模型的变化通知给整个应用,甚至是系统外的组件
  3. 可以进行嵌套,隔离业务功能和数据
  4. 给表达式提供运算时所需的执行环境

作用域包含了渲染视图时所需的功能和数据,它是所有视图的唯一源头。可以将作用域理解成视图模型(view model)。

$scope的生命周期

每当事件被处理时,$scope就会对定义的表达式求值。此时事件循环会启动,并且Angular应用会监控应用程序内的所有对象,脏值检测循环也会运行。

  1. 创建:在创建控制器或指令时,AngularJS会用$injector创建一个新的作用域,并在这个新建的控制器或指令运行时将作用域传递进去。
  2. 链接:当Angular开始运行时,所有的$scope对象都会附加或者链接到视图中。所有创建$scope对象的函数也会将自身附加到视图中。这些作用域将会注册当Angular应用上下文中发生变化时需要运行的函数。

    这些函数被称为$watch函数,Angular通过这些函数获知何时启动事件循环。

  3. 更新:当事件循环运行时,它通常执行在顶层$scope对象上(被称作$rootScope),每个子作用域都执行自己的脏值检测。每个监控函数都会检查变化。如果检测到任意变化,$scope对象就会触发指定的回调函数。

  4. 销毁:当一个$scope在视图中不再需要时,这个作用域将会清理和销毁自己。

    尽管永远不会需要清理作用域(因为Angular会为你处理),但是知道是谁创建了这个作用域还是有用的,因为你可以使用这个$scope上叫做$destory()的方法来清理这个作用域。

指令和作用域

指令在AngularJS中被广泛使用,指令通常不会创建自己的$scope,但也有例外。比如ng-controllerng-repeat指令会创建自己的子作用域并将它们附加到DOM元素上。