AngularJs（三）作用域

作用域（scope）是构成AngularJS应用的核心基础，在整个框架中都被广泛使用，因此了解它如何工作是非常重要的。

AngularJS将 $scope 设计成和DOM类似的结构，因此 $scope 可以进行嵌套，也就是说我们可以引用父级 $scope 中的属性。$scope是表达式作用的上下文，是视图和控制器之间的“胶水”。我们通常习惯首先使用控制器去读取模型中的数据，然后将处理后的数据放到$scope当中，这样我们在控制器的作用范围之内就可以直接读取到$scope中的数据，并通过表达式的方式在视图中展示出来。

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

$rootScope：AngularJS启动并生成视图时，会将根 ng-app 元素同 $rootScope 进行绑定。 $rootScope 是所有 $scope 对象的最上层。

示例：

<div ng-app="myApp">
<h1>Hello{{ name }}</h1>
</div>
<script>
         angular.module('myApp',[ ])
.run(function($rootScope) {
$rootScope.name = "World";
});
</script>

我们可以不将变量设置在$rootScope 上，而是用控制器显式创建一个隔离的子 $scope 对象，

把它设置到这个子对象上。使用ng-controller 指令可以将一个控制器对象附加到DOM元素上，

如下所示：

<div ng-app="myApp">
<div ng-controller="MyController">
<h1>Hello {{ name }}</h1>
</div>
</div>
<script>
angular.module("myApp", [ ])
.controller('MyController',[‘$scope’,
function($scope) {
$scope.name = "Ari";
}]);
</script>

这里顺带提一下，上面的写法其实阅读性并不是很好，因为我们把Controller函数写在了传参数组当中，各种括号参杂在一起。下面的写法会好一点：

<script>
angular.module("myApp", [ ])
.controller('MyController',[‘$scope’,MyController]);
  function MyController($scope){
$scope.name = "Ari";
}
</script>

 

作用域有以下的基本功能：

  1.提供观察者以监视数据模型的变化；

  2.可以将数据模型的变化通知给整个应用，甚至是系统外的组件；

  3.可以进行嵌套，隔离业务功能和数据；

  4.给表达式提供运算时所需的执行环境。

 

$scope 对象的生命周期处理有四个不同阶段。

4.4.1 创建

在创建控制器或指令时，AngularJS会用 $injector 创建一个新的作用域，并在这个新建的控制器或指令运行时将作用域传递进去。

4.4.2 链接

当Angular开始运行时，所有的 $scope 对象都会附加或者链接到视图中。所有创建 $scope 对象的函数也会将自身附加到视图中。这些作用域将会注册当Angular应用上下文中发生变化时需要运行的函数。

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

4.4.3 更新

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

4.4.4 销毁

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