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

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

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

<div ng-controller="ParentCtrl">                  //父级
<div ng-controller="SelfCtrl"> //自己
<a ng-click="click()">click me</a>
<div ng-controller="ChildCtrl"></div> //子级
</div>
<div ng-controller="BroCtrl"></div> //平级
</div>

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赋的值,只能父级得到;而平级的什么都不能得到。

angular 事件广播和事件监听的更多相关文章

  1. SpringBoot | 第三十二章:事件的发布和监听

    前言 今天去官网查看spring boot资料时,在特性中看见了系统的事件及监听章节.想想,spring的事件应该是在3.x版本就发布的功能了,并越来越完善,其为bean和bean之间的消息通信提供了 ...

  2. libevent (三) 事件注册与循环监听

    事件注册与循环监听 在libevent中为了监听某种事件的发生,设置事件触发后的回调函数,也就是说对该事件注册到当前的IO模型中. 事件注册 事件初始化 使用`event_new`函数来对事件进行初始 ...

  3. jQuery封装自定义事件--valuechange(动态的监听input,textarea)之前值,之后值的变化

    jQuery封装自定义事件--valuechange(动态的监听input,textarea)之前值,之后值的变化 js监听输入框值的即时变化 网上有很多关于 onpropertychange.oni ...

  4. vue监听滚动事件,实现滚动监听

    在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> ...

  5. Angular.js中使用$watch监听模型变化

    $watch简单使用 $watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你. $watch(watchExpression, listener, objectEqua ...

  6. 广播小案例-监听系统网络状态 --Android开发

    本例通过广播实现简单的监听系统网络状态改变的小案例. 1.案例效果演示 当手机连网后,系统提示“已连接网络”, 当手机断网后,系统提示“当前网络不可用”. 2.案例实现 在主活动中动态注册广播,然后写 ...

  7. eas中删除原来的监听事件添加新的监听事件

    kdtEntrys.removeKDTEditListener(kdtEntrys.getListeners(KDTEditListener.class)[0]);  kdtEntrys.addKDT ...

  8. angular设置全局变量,修改监听变量

    创建service.module.ts import { NgModule, ModuleWithProviders } from '@angular/core'; import { SomeShar ...

  9. angular指令监听ng-repeat渲染完成后执行自定义事件方法

    今天工作中遇到需要用到ng-repeat遍历渲染完后执行某个操作,angular本身并没有提供监听ng-repeat渲染完成的指令,所以需要自己创建自定义指令. 在ng-repeat模板实例内部会暴露 ...

随机推荐

  1. Flask实战第68天:项目上线部署

    在开发机上的准备工作 1.确认项目没有bug 2.用pip freeze >requirements.txt将当前环境的包导出到requirements.txt文件中,方便部署的时候安装 3.将 ...

  2. BZOJ 2288 【POJ Challenge】生日礼物(贪心+优先队列)

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=2288 [题目大意] 给出一列数,求最多取m段连续的数字,使得总和最大 [题解] 首先我 ...

  3. BZOJ 1433 [ZJOI2009]假期的宿舍(网络流)

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1433 [题目大意] 在校学生有自己的床,外校的则没有,如果两个同学相互认识,则可以借用 ...

  4. BZOJ 3391 [Usaco2004 Dec]Tree Cutting网络破坏(树形DP)

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=3391 [题目大意] 给定一棵树,求分支size均不大于一半点数的点 [题解] 递归的同 ...

  5. 【高精度】【找规律】Gym - 101243B - Hanoi tower

    题意:给你一个经典的汉诺塔递归程序,问你最少几步使得三个柱子上的盘子数量相同.(保证最开始盘子数量可以被3整除) 规律:ans(n)=2^(2*n/3-1)+t(n/3). t(1)=0. t(n)= ...

  6. 【优先队列】POJ1442-Black Box

    [思路] 建立一个小堆和一个大堆.大堆用来存放第1..index-1大的数,其余数存放在大堆,小堆的堆顶元素便是我们要求出的第index大的数.每次插入一个A(n),必须保证大堆中数字数目不变,故先插 ...

  7. 使用Busybox制作CRAMFS文件系统成功

    转:http://www.360doc.com/content/11/1013/22/7775902_155877501.shtml 这几天在使用Busybox制作FS2410开发板的CRAMFS文件 ...

  8. 轻量级的REST中间件

    轻量级的REST中间件 纯净的REST中间件,绝对的轻量级,不需要安装任何三方控件 基于HTTPS.SYS和WEBSOCKET通信,支持海量并发 支持跨越DELPHI6~DELPHI10.2.2的开发 ...

  9. arcgis10.2转shp文件中文乱码问题解决方案

    从ArcGIS的数据源入手,自己升级ArcGIS for Desktop到10.2.0,然后用该版本ArcGIS软件重新导出数据,竟然还是乱码.经咨询ArcGIS技术支持,技术支持说必须保证shp文件 ...

  10. Node.js中的express框架获取参数

    express获取参数有三种方法: req.query  适合 http://localhost:3000/form?num=8888 req.body   适合http://localhost:30 ...