且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2021-09-28 22:32:23

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

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

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

 

二,实例说明angularjs $broadcast $emit $on的用法1,html代码

Java代码  angularjs $broadcast $emit $on 事件触发controller间的值传递
  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代码

Java代码  angularjs $broadcast $emit $on 事件触发controller间的值传递
  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的输出结果

Java代码  angularjs $broadcast $emit $on 事件触发controller间的值传递
  1. child    
  2. parent  

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