博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
angular 事件广播和事件监听
阅读量:7201 次
发布时间:2019-06-29

本文共 1410 字,大约阅读时间需要 4 分钟。

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

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

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

//父级
//自己
click me
//子级
//平级

js代码

appControllers.controller('SelfCtrl', function($scope) {      $scope.click = function () {          $scope.$broadcast('to-child', 'child');          $scope.$emit('to-parent', 'parent');      }  });  appControllers.controller('ParentCtrl', function($scope) {      $scope.$on('to-parent', function(d,data) {          console.log(data);         //父级能得到值      });      $scope.$on('to-child', function(d,data) {          console.log(data);         //子级得不到值      });  });  appControllers.controller('ChildCtrl', function($scope){      $scope.$on('to-child', function(d,data) {          console.log(data);         //子级能得到值      });      $scope.$on('to-parent', function(d,data) {          console.log(data);         //父级得不到值      });  });  appControllers.controller('BroCtrl', function($scope){      $scope.$on('to-parent', function(d,data) {          console.log(data);        //平级得不到值      });      $scope.$on('to-child', function(d,data) {          console.log(data);        //平级得不到值      });  });

点击Click me的输出结果

child  parent

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

转载地址:http://bzzum.baihongyu.com/

你可能感兴趣的文章
Raw-OS源代码分析之任务删除与总结
查看>>
【微信小程序】获取轮播图当前图片下标、滑动展示对应的位数、点击位数展示对应图片...
查看>>
SpringBoot配置属性之其他
查看>>
Calling convention-调用约定
查看>>
nginx配置url重写
查看>>
合作伙伴有华为联想的区块链项目Brahma OS派送糖果,截止25号
查看>>
国家市场监管总局:转供电主体不得截留降价红利
查看>>
面试不过的原因?不仅适用数据分析师!
查看>>
快速掌握JavaScript面试基础知识(一)
查看>>
Django进阶
查看>>
【从零开始学习Oracle数据库】(1)建表与简单查询
查看>>
安卓存储
查看>>
Angular Material 之 Get Started
查看>>
WiFi万能钥匙VS腾讯WIFI管家:元老未老还是新秀更贵?
查看>>
收藏的一些文章
查看>>
Dockerfile构建PHP开发镜像:Alpine+Nginx+PHP7+Supervisor+Crontab+Laravel
查看>>
JavaScript 精粹:Number 与 Math
查看>>
网易易盾最新一代Java2c加固究竟有什么厉害之处?
查看>>
【ES6】改变 JS 内置行为的代理与反射
查看>>
如何解决微信端直接跳WAP端
查看>>