AngularJS学习之路--- $on、$emit和$broadcast的使用

AngularJS API文档对scope（作用域）是这样描述的：

• 是一个存储应用数据模型的对象
• 为 表达式供了一个执行上下文
• 作用域的层级结构对应于 DOM 树结构
• 作用域可以监听 表达式的变化并传播事件

AngularJS中的作用域有一个非常有层次和嵌套分明的结构。其中它们都有一个主要的$rootScope(也就说对应的Angular应用或者ng-app)，然后其他所有的作用域部分都是继承自这个$rootScope的，或者说都是嵌套在主作用域下面的。很多时候，你会发现这些作用域不会共享变量或者说都不会从另一个原型继承什么。

那么在这种情况下，如何在作用域之间通信呢？其中一个选择就是在应用程序作用域之中创建一个单例服务，然后通过这个服务处理所有子作用域的通信。

在AngularJS中还有另外一个选择：通过作用域中的事件处理通信。但是这种方法有一些限制；例如，你并不能广泛的将事件传播到所有监控的作用域中。你必须选择是否与父级作用域或者子作用域通信。

$on、$emit和$broadcast使得event、data在controller之间的传递变的简单。

$emit只能向parent controller传递event与data $broadcast只能向child controller传递event与data $on用于接收event与data

下面看一个例子：

HTML

<div ng-controller="ParentController"><!--父级-->
<div ng-controller="SelfController"><!--自己-->
<a ng-click="click()">Click me</a>
<div ng-controller="ChildController"></div><!--子级-->
</div>
<div ng-controller="BroController"></div><!--平级-->
</div>

JS

ntangular.module('myapp',[])
.controller('SelfController',function ($scope) {
    $scope.click = function() {
       $scope.$emit('toParent', 'SelfController中scope数据传到父级');
       $scope.$broadcast('toParent', 'SelfController中scope数据传到父级');
    };
})
.controller('ParentController',function ($scope) {
    $scope.$on('toParent', function (event,data) {
       console.log('父级接收到：',data);
    });
    $scope.$on('toChild', function (event,data) {
       console.log('父级接收到：',data);
    });
})
.controller('ChildController',function ($scope) {
    $scope.$on('toParent', function (event,data) {
       console.log('子级接收到：',data);
    });
    $scope.$on('toChild', function (event,data) {
       console.log('子级接收到：',data);
    });
})
.controller('BroController',function ($scope) {
    $scope.$on('toParent', function (event,data) {
       console.log('平级接收到：',data);
    });
    $scope.$on('toChild', function (event,data) {
       console.log('平级接收到：',data);
    });
});

运行结果

$emit和$broadcast可以传多个参数，$on也可以接收多个参数。

 

在$on的方法中的event事件参数，其对象的属性和方法如下

事件属性目的event.targetScope发出或者传播原始事件的作用域event.currentScope目前正在处理的事件的作用域event.name事件名称event.stopPropagation()一个防止事件进一步传播(冒泡/捕获)的函数(这只适用于使用`$emit`发出的事件)event.preventDefault()这个方法实际上不会做什么事，但是会设置`defaultPrevented`为true。直到事件监听器的实现者采取行动之前它才会检查`defaultPrevented`的值。event.defaultPrevented如果调用了`preventDefault`则为true