Angular之作用域_angular多作用域-CSDN博客

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>
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

$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>
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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){
        //处理传播事件的代码
    })
 
 1
2
3

$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