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

简介:

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

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

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

 

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

Java代码   收藏代码
  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代码   收藏代码
  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代码   收藏代码
  1. child    
  2. parent  

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

相关文章
|
7月前
|
JavaScript
Angular使用@Input和@Output实现父子组件互相传参(类似Vue的props和this.emit)
Angular使用@Input和@Output实现父子组件互相传参(类似Vue的props和this.emit)
|
3月前
|
前端开发
react学习(17)回调形式的ref
react学习(17)回调形式的ref
|
7月前
快速创建Angular组件并定义传参、绑定自定义事件的方法
快速创建Angular组件并定义传参、绑定自定义事件的方法
|
前端开发
react中使用shouldComponentUpdate生命周期函数调用setState引起的无限循环的错误
react中使用shouldComponentUpdate生命周期函数调用setState引起的无限循环的错误
136 0
|
前端开发 JavaScript API
关于转发多个Ref,90%前端都不知道的React useImperativeHandle Hook
关于转发多个Ref,90%前端都不知道的React useImperativeHandle Hook
176 0
|
JavaScript 前端开发 编译器
TS_React:Hook类型化
依赖类型推断 类型化 useState 类型化 useReducer 类型化 useRef 类型化 forwardRef 类型化 useEffect 和 useLayoutEffect 类型化 useMemo 和 useCallback 类型化 useContext 类型化自定义hook
TS_React:Hook类型化
|
JavaScript
angular从iframe里面调用父页面的controller的方法
angular从iframe里面调用父页面的controller的方法
react+hook+ts项目总结-ant design 表单错误的回调事件
react+hook+ts项目总结-ant design 表单错误的回调事件
81 0
react+hook+ts项目总结-ant design 表单错误的回调事件
|
前端开发 JavaScript API
TS_React:类型化EventHandler
今天我们主要是讲如何利用TS对React中的事件回调进行类型化处理。
128 0
react18-学习笔记24-在函数组件-state-hook
react18-学习笔记24-在函数组件-state-hook
83 0
react18-学习笔记24-在函数组件-state-hook