angularjs $broadcast $emit $on 事件触发controller间的值传递

张映 发表于 2014-03-07

分类目录： js/jquery

标签：$broadcast, $emit, $on, angular, angularjs, js

使用angularjs，发现controller间的值传递，比较麻烦的，以后几篇文章会陆续说几种方法。

一，angularjs $broadcast $emit $on的处理思想

在一个controller里面通过事件触发一个方法，在方法里面通过$broadcast或$emit来定义一个变量，在父，子controller里面通过$on来获取。

二，实例说明angularjs $broadcast $emit $on的用法

1，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>  

2，js代码

查看 复制 打印 ?

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

3，点击Click me的输出结果

1. child  
2. parent  

用$broadcast赋的值，只能子级得到值；$emit赋的值，只能父级得到；而平级的什么都不能得到。