Angular之作用域

1. 作用域的特点

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

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

1.2 $watch的使用

<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> 1234567891011121314151617

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

2. 作用域的层级

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

<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> 123456789101112131415

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

3. 作用域的事件

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

服务事件

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

  而$emit 的功能则正好相反，是将事件从子级作用域传播至父级作用域,调用方式如下：     $emit(eventname,data)

  使用$on方法来在作用域中监控传播来的事件并获取相应的数据,调用方式如下：

$on(eventname,function(event,data){ //处理传播事件的代码 }) 123 $emit只能向parent controller传递event与data$broadcast只能向child controller传递event与data$on用于接收event与data emit和 broadcast可以传多个参数，$on也可以接收多个参数。

其中，eventname为需要监控的传播事件名称，event为时间传播过程中自带的特征，该特征包括以下几个重要的属性：

属性名称 功能说明 event.targetScope 返回发出或者传播原始事件的作用域名称 event.currentScope 返回正在接收传播事件的作用域名称 event.name 传播事件的名称 event.stopPropagation 防止事件进行冒泡操作的函数（这只适用于使用$emit发出的事件） event.preventDefault 阻止代码事件的发生 event.defaultPrevented 阻如果调用了preventDefault，则为true，否则为false

转自：http://lib.csdn.net/article/angularjs/50277