AngularJS 第三天----作用域

作用域的概念及其功能

AngularJS使用作用域的概念来充当数据模型的作用，在视图和控制器之间起着桥梁的作用。由于双向绑定的数据特性，视图的修改会更新 $scope，同样对 $scope的修改也会重新渲染视图。AngulaJS将 $scope设计成DOM类似的结构， $scope可以嵌套，同时也可以引用父级 $scope的属性。作用域提供监视数据模型变化的能力，允许开发者使用其中的apply机制，将数据模型的变化在整个应用范围内进行通知。

作用域的功能可以总结为以下几点：

1. 提供观察者( $watch)以监视数据模型的变化
2. 将数据模型的变化通知整个应用
3. 可以嵌套，隔离业务功能和数据
4. 创建表达式运算所需的执行环境

$rootScope & $scope

$rootScope是AngularJS最顶层的作用域，同ng-app元素进行绑定。一般的我们不会在 $rootScope附加太多的业务逻辑数据， $scope对象是普通的JS对象，可以访问到 $rootScope中的数据，我们一般选择在 $scope中添加修改我们的数据。scope中所有的数据都可以被视图自动的访问到。 如下代码所示：

<div ng-app = "myApp">
   <h1>hello {{name}} </h1>
</div>

我们希望name是 $scope的一个属性，那么可以使用如下代码来实现这一点：

angular.module('myApp', [])
       .run(function( $rootScope) {
          $rootScope.name = "World";
     });

这个例子中我们使用 $rootScope来绑定name的属性, 在视图中引用这个name属性来将它展示给用户。一般的我们不将变量直接设置在 $rootScope上，而是用控制器显示的创建 $scope对象，并把它设在这个对象中。那么代码可以修改为：

<div ng-app = "myApp">
   <div ng-controller = "MyController">
       <!--name的"作用域"限于MyController内-->
       <h1>hello {{name}} </h1>
   </div>
</div>

通过创建控制器来管理与其相关的变量，代码如下所示：

angular.module("myApp",[]).controller("MyController", function( $scope){
    $scope.name = "Ari";
});

$socpe的生命周期

scope的生命周期处理主要包含以下几个阶段：

1. 创建： AngularJS启动时，会使用 $injector创建一个新的作用域，将作用域传进相应的控制器或指令中

   注意： AngularJS除了ng-controller和ng-repeat指令会创建自己的子作用域，一般不会创建自己的 $scope

2. 链接： AngularJS运行时，所有的 $scope对象都会链接到视图上，通过注册 $watch函数来获取数据变化通知

3. 更新： AngularJS通过在顶层 $scope对象执行事件循环，每个自作用域都会执行自己的脏值检测，每个监控函数会检查变化，如果检测到变化，则 $scope对象触发指定的回调函数

4. 销毁： $socpe上可以通过使用 $destoy（）方法销毁作用域