3.作用域scope

1.概述

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

AngularJS 将$scope 设计成和DOM 类似的结构，因此$scope 可以嵌套，也就是可以引用父级$scope 中的属性。

将业务逻辑放在控制器中，数据放在数据模型中，这是非常完美的结构。

$scope 在AngularJS 中充当数据模型，但与传统的数据模型不一样，它不负责处理和操作数据，只是视图和HTML之间的桥梁，视图和控制器之间的纽带。

2.$scope 的生命周期

Angular 的事件发生在浏览器中时，如在ng-model 属性绑定的字段中输入，或者带有ng-click 属性的按钮被点击，Angular 的事件循环就会启动。当事件被处理时，$scope 就会对定义的表达式求值。事件循环开始启动，Angular 应用监控应用程序内的所有对象，脏值检测循环也会启动。

$scope 的生命周期处理有4个阶段：

1）创建

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

2）链接

当Angular 开始运行时，所有的$scope 对象都会附加或者链接到视图（HTML）中。所有创建$scope 对象的函数也会将自身附加到视图中。这些作用域将会注册当Angular 应用上下文中发生变化时需要运行的函数。这些函数被称为$watch 函数，Angular 通过这些函数获知如何启动事件循环。

3）更新

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

4）销毁

当一个$scope 在视图中不再需要时，这个作用域会清理和销毁自己。不需要手动销毁，但可用$destory() 方法清理这个作用域。

3.如何使用Scope

在AngularJS 创建控制器是，可以将$scope 对象作为一个参数传递。当在控制器中添加$scope 对象时，视图（HTML）可以获取这些属性。

<div ng-app="myApp" ng-congroller="myCtrl">
    <h1>{{carname}}</h1>
</div>
<script>
    var app = angular.module('myApp',[]);
    app.controller('myCtrl', function($scope){
        $scope.carname=  'Volvo';
    });
</script>

　　

4.Scope 作用域

在大型项目中，HTML DOM 有多个作用域，这时你需要知道你使用的scope 对应的作用域是哪一个。

<div ng-app='myApp' ng-controller='myCtrl'>
    <ul>
        <li ng-repeat="x in names">{{x}}</li>
    </ul>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller("myCtrl",function($scope){
    $scope.names={"Email","Tobias","Linus"};
});
</script>

　　

5.根作用域

所有应用都有一个$rootScope, 它可以作用在ng-app 指令包含的所有HTML 元素中。

$rootScope 可作用于整个应用中。是各个controller 中scope 的桥梁。用rootScope 定义的值，可以在各个controller 中使用。

<div ng-app="myApp" ng-controller="myCtrl">
    <h1>{{lastname}} 家族成员:</h1>
    <ul>
        <li ng-repeat="x in names">{{x}}</li>
    </ul>
</div>
<script>
    var app=angular.module("myApp"[]);
    app.controller("myCtrl", function($scope){
        $scope.names=["Emil", "Tobias", "Linus"];
        $scope.lastname="Refsns";
    });
</script>