深入分析AngularJS框架中$scope的功能和生命周期

$scope的使用贯穿整个Angular App应用程序，它与数据模型相关联，也是表达式执行的上下文。使用$scope，在视图和控制器之间建立了一个通道。基于范围视图，当修改数据时，将立即更新$scope，并且当相同的$scope改变时，将立即重新呈现视图。

有了$scope的桥梁，应用的业务代码可以全部在控制器中，数据可以全部存储在控制器的$scope中。

$scope是一个将视图(一个DOM元素)链接到控制器的对象。在我们的MVC结构中，这个$scope将成为一个模型，它提供了一个绑定到DOM元素(及其子元素)的excecution上下文。

虽然听起来很复杂，$scope实际上是一个JavaScript对象，控制器和视图都可以访问它，所以我们可以用它在它们之间传递信息。在这个$scope对象中，我们存储了要在视图上运行的数据和函数。

每个Angular应用程序都会有一个$rootScope。这个$rootScope是顶级作用域，它对应的是属性为ng-app指令的DOM元素。

如果页面上没有显式设置$scope，Angular将在此绑定数据和函数，第一部分中的示例在这一点上运行成功。

在这个例子中，我们将使用$rootScope。在main.js文件中，我们向这个范围添加了一个name属性。通过将此函数放入app.run函数，我们可以确保它可以在应用程序的其他部分之前执行。你可以把app.run函数看作Angular应用的主要方法。

app . run(function($ rootScope){ $ rootScope . name=' Ari Lerner '；});现在，我们可以使用模板表达式{{}}在视图中的任何位置访问该名称属性，如下所示：

当{{ name }}$rootScopeAngular应用程序启动并生成视图时，它将使用$rootScope绑定根ng-app元素。$rootScope是所有$ scopes的顶层对象，可以理解为Angular应用程序中的全局作用域对象，所以给它附加太多的逻辑或变量并不是一个好主意，这和污染Javascript全局作用域是一样的。

$scope $scope对象的角色在Angular中充当数据模型，也就是一般MVC框架中模型的角色。但是，它与一般意义上的数据模型并不完全相同，因为$scope并不处理和操纵数据，而只是在视图和HTML之间搭建了一座桥梁，从而实现了视图和Controller之间的友好通信。

进一步系统划分其职能和职能：

它提供观察者去倾听数据模型的变化，将数据模型的变化告知整个App，嵌套、隔离业务功能和数据，为表达式提供上下文执行环境。在Javascript中创建新的执行上下文实际上是用函数创建一个新的本地上下文。在Angular中创建新的子DOM元素范围时，实际上是在为子DOM元素创建新的执行上下文。

在$scope生命周期Angular中还有一个“事件”的概念。例如，当与ng-model绑定的输入值发生变化或单击ng-click按钮时，Angular的事件循环将开始。事件循环是Angular中非常非常核心的概念。因为不是本文的主旨，我就不多说了，有兴趣的可以自己看资料。在这里，事件是在Angular执行的上下文中处理的，并且$scope将计算定义的表达式。此时，事件循环开始，Angular将监视应用程序中的所有对象，脏值检查循环也将开始。

$scope的生命周期有四个阶段：

1.创造

或者在创建控制器或指令时，Angular将使用$injector创建一个新的作用域，然后在控制器或指令运行时传入该作用域。

2.链接

当Angular启动时，它会将所有$scope对象附加或链接到视图，并且创建$scope对象的所有函数也会附加到视图。这些作用域将注册Angular的上下文发生变化时需要运行的函数，即$watch函数，Angular将通过该函数启动事件循环。

3.更新

一旦事件循环开始运行，它将开始执行自己的脏值检测。一旦检测到更改，它将触发在$scope上指定的回调函数。

4.破坏

一般来说，如果视图中不再需要$scope，Angular会自己清理它。当然，也可以通过$destroy()函数手动清理。

ng-控制器

要显式创建$scope对象，我们需要在DOM元素上安装一个控制器对象，使用ng-controller指令属性：

div-controller=' my controller ' { person。name}}/div-controller指令为DOM元素创建一个新的$scope对象，并将这个$scope对象包含在外部DOM元素的$scope对象中。在上面的例子中，这个外部DOM元素的$scope对象是$rootScope对象。这个范围链是这样的：

现在，MyController已经创建了一个$scope对象，可以从DOM元素内部直接访问。让我们在这个$scope中创建一个person对象，在main.js中：

app.controller('MyController '，function($ scope){ $ scope . person={ name : ' Ari Lerner ' }；});现在，我们可以在带有ng-controller='MyController '属性的DOM元素的任何子元素中访问这个person对象，因为它在$scope上。除了一个例外，所有作用域都遵循原型继承，这意味着它们可以访问它们的父作用域。对于任何一个属性和方法，如果AngularJS在当前范围内找不到，就会去父范围，如果在父范围内找不到，就会继续回到$rootScope。

唯一的例外是一些指令属性可以有选择地创建一个独立的作用域，这样这个作用域就不会继承它的父作用域。

例如，假设我们有一个包含person对象的ParentController，一个ChildController想要访问这个对象：

app . controller(' parent controller '，function($ scope){ $ scope . person={ greet ed : false }；});app . controller(' child controller '，function($ scope){ $ scope . sayHello=function(){ $ scope . person .映入眼帘=true}});当我们在视图中将子控制器绑定到父控制器时，我们可以在子元素中访问父控制器创建的父范围的属性，就像访问子控制器自己的范围中的属性一样：

div ng-controller=' ParentController ' div ng-controller=' child controller '输入类型='text' ng-model='person.name '占位符=' Name '/输入一个ng-click='sayHello()'问好/a /div {{ person }}/div