AngularJS 笔记——$on、$emit和$broadcast的使用与区别

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

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

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

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

区别 1：

• 发送消息： $scope.$emit(name, data) 或者 $scope.$broadcast(name, data);
• 接收消息： $scope.on(name,function(event,data){ });

区别 2：

• $emit 广播给父controller   $broadcast 广播给子controller
• broadcast 是从发送者向他的子scope广播一个事件。
• $emit 广播给父controller，父controller 是可以收到消息
• $on 有两个参数function(event,msg)  第一个参数是事件对象，第二个参数是接收到消息信息

例子如下：

html代码

1 <div ng-controller="ParentCtrl">                <!--父级-->
2     <div ng-controller="SelfCtrl">              <!--自己-->
3         <a ng-click="click()">click me</a>
4         <div ng-controller="ChildCtrl"></div>   <!--子级-->
5     </div>
6     <div ng-controller="BroCtrl"></div>         <!--平级-->
7 </div>

js代码

 1 app.controller(‘SelfCtrl‘, function($scope) {
 2   $scope.click = function () {
 3     $scope.$broadcast(‘to-child‘, ‘child‘);
 4     $scope.$emit(‘to-parent‘, ‘parent‘);
 5   }
 6 });
 7
 8 app.controller(‘ParentCtrl‘, function($scope) {
 9   $scope.$on(‘to-parent‘, function(event,data) {
10     console.log(‘ParentCtrl‘, data);       //父级能得到值
11   });
12   $scope.$on(‘to-child‘, function(event,data) {
13     console.log(‘ParentCtrl‘, data);       //子级得不到值
14   });
15 });
16
17 app.controller(‘ChildCtrl‘, function($scope){
18   $scope.$on(‘to-child‘, function(event,data) {
19     console.log(‘ChildCtrl‘, data);         //子级能得到值
20   });
21   $scope.$on(‘to-parent‘, function(event,data) {
22     console.log(‘ChildCtrl‘, data);         //父级得不到值
23   });
24 });
25
26 app.controller(‘BroCtrl‘, function($scope){
27   $scope.$on(‘to-parent‘, function(event,data) {
28     console.log(‘BroCtrl‘, data);          //平级得不到值
29   });
30   $scope.$on(‘to-child‘, function(event,data) {
31     console.log(‘BroCtrl‘, data);          //平级得不到值
32   });
33 });

最终结果：

ParentCtrl child

ChildCtrl parent

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

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

学习：http://www.cnblogs.com/CraryPrimitiveMan/p/3679552.html