Angular之作用域

1. 作用域的特点

1.1 具体来说，作用域包括以下3个比较显著特点：

1. 提供了一个$watch方法来监听数据模型的变化，ng-model的双向绑定，就是由其支撑。
2. 提供了$apply方法，为各种类型的数据模型改变提供支撑，例如，通过在页面视图中的ng-click指令，执行控制器中的代码。
3. 提供了执行的环境，一个表达式必须在拥有该表达式属性的作用域中执行才更合适，作用域通过$scope对象，使所有的表达式都拥有对应的执行环境，也就是执行上下文。

1.2 $watch的使用

 
 

  
  
1
  
  
2
  
  
3
  
  
4
  
  
5
  
  
6
  
  
7
  
  
8
  
  
9
  
  
10
  
  
11
  
  
12
  
  
13
  
  
14
  
  
15
  
  
16
  
  
17
 
 
 <div ng-controller='myController'> <div> <input type="text" ng-model='name' /> </div> <div>累计变化次数：{{count}}</div> </div> <script type="text/javascript"> var app=angular.module('myapp',[]); app.controller('myController',['$scope',function($scope){ $scope.count=0; $scope.name=''; $scope.$watch('name',function(){ $scope.count++; }) }]) </script>

??$watch方法对$scope中的name属性进行监视，当该属性发生变化时，将count属性值累加1.
??其具体原因在于，每次对已绑定ng-model指令的name进行修改时，内部的$digest方法就会自动运行一次，检测name属性是否与上次$digest运行时的内容保持一直，如果不一致，则执行$watch绑定的函数。

2. 作用域的层级

顶级作用域只有一个，下面的子作用域可以存在多个，子作用域可以继承父作用域的全部属性和方法，同级子作用域间不可互相访问各自的属性和方法。

  
  
1
  
  
2
  
  
3
  
  
4
  
  
5
  
  
6
  
  
7
  
  
8
  
  
9
  
  
10
  
  
11
  
  
12
  
  
13
  
  
14
  
  
15
 
  <div ng-controller="parentController"> <ul ng-controller="childfirstController"> <li>{{childFirst}}</li> </ul> <ul ng-controller="childsecondController"> {{childFirst}} </ul> </div> <div ng-controller='myController'> <div> <input type="text" ng-model='name' /> </div> <div>累计变化次数：{{count}}</div> </div>

parentController是父级控制器，childfirstController和childsecondController是子级控制器，子级控制器可以直接继承父级控制器作用域中通过$scope添加的属性和方法，如果父级控制器又通过$rootScope添加了属性和方法，那么子级作用域将首先访问$scope，如果没有找打结果，然后继续向上再访问$rootScope。

3. 作用域的事件

有两种方式可以实现作用域之间的通信；

1. 服务
2. 事件

??要使用事件，必须调用Angular中提供的两个方法：$broadcast和$emit。
其中，$broadcast的功能是将事件从父级作用域传播至子级作用域，调用方式如下：
??$broadcast(evventname,data)

??而$emit的功能则正好相反，是将事件从子级作用域传播至父级作用域,调用方式如下：
??$emit(eventname,105)"> ??使用$on方法来在作用域中监控传播来的事件并获取相应的数据,调用方式如下：

  
  
1
  
  
2
  
  
3
 
 $on(eventname,function(event,data){
        //处理传播事件的代码
    })