angular 事件广播和事件监听
一,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 事件广播和事件监听的更多相关文章
- SpringBoot | 第三十二章:事件的发布和监听
前言 今天去官网查看spring boot资料时,在特性中看见了系统的事件及监听章节.想想,spring的事件应该是在3.x版本就发布的功能了,并越来越完善,其为bean和bean之间的消息通信提供了 ...
- libevent (三) 事件注册与循环监听
事件注册与循环监听 在libevent中为了监听某种事件的发生,设置事件触发后的回调函数,也就是说对该事件注册到当前的IO模型中. 事件注册 事件初始化 使用`event_new`函数来对事件进行初始 ...
- jQuery封装自定义事件--valuechange(动态的监听input,textarea)之前值,之后值的变化
jQuery封装自定义事件--valuechange(动态的监听input,textarea)之前值,之后值的变化 js监听输入框值的即时变化 网上有很多关于 onpropertychange.oni ...
- vue监听滚动事件,实现滚动监听
在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> ...
- Angular.js中使用$watch监听模型变化
$watch简单使用 $watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你. $watch(watchExpression, listener, objectEqua ...
- 广播小案例-监听系统网络状态 --Android开发
本例通过广播实现简单的监听系统网络状态改变的小案例. 1.案例效果演示 当手机连网后,系统提示“已连接网络”, 当手机断网后,系统提示“当前网络不可用”. 2.案例实现 在主活动中动态注册广播,然后写 ...
- eas中删除原来的监听事件添加新的监听事件
kdtEntrys.removeKDTEditListener(kdtEntrys.getListeners(KDTEditListener.class)[0]); kdtEntrys.addKDT ...
- angular设置全局变量,修改监听变量
创建service.module.ts import { NgModule, ModuleWithProviders } from '@angular/core'; import { SomeShar ...
- angular指令监听ng-repeat渲染完成后执行自定义事件方法
今天工作中遇到需要用到ng-repeat遍历渲染完后执行某个操作,angular本身并没有提供监听ng-repeat渲染完成的指令,所以需要自己创建自定义指令. 在ng-repeat模板实例内部会暴露 ...
随机推荐
- Spring源码分析之Bean的加载流程
spring版本为4.3.6.RELEASE 不管是xml方式配置bean还是基于注解的形式,最终都会调用AbstractApplicationContext的refresh方法: @Override ...
- 安卓android破解方法
韩梦飞沙 yue31313 韩亚飞 han_meng_fei_sha 313134555@qq.com 如何给smali文件中的unicode字符串添加中文注释 如何注释掉smali文件中包含关键字 ...
- 数据库SQL归纳(三)
数据查询功能 单表查询 选择若干列 1. 指定列 SELECT 列名称 FROM 表名称 2. 全部列 SELECT * FROM 表名称 3. 经过计算的列 SELECT Sname, 2019-S ...
- hdu 5592 ZYB's Premutation (权值线段树)
最近在线段树的世界里遨游,什么都能用线段树做,这不又一道权值线段树了么. ZYB's Premutation Time Limit: 2000/1000 MS (Java/Others) Mem ...
- HDU 2255 奔小康赚大钱(KM算法)
[题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=2255 [题目大意] 求最大匹配 [题解] KM模板 [代码] #include <cstdi ...
- BZOJ 1042:[HAOI2008]硬币购物(容斥原理+DP)
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1042 [题目大意] 硬币购物一共有4种硬币.面值分别为c1,c2,c3,c4. 某人去 ...
- 【思路】Gym - 101173F - Free Figurines
套娃形成一些链形结构,给你套娃的初始状态和目标状态,问你需要几步(将最外层套娃打开,以及将一整套套娃塞进一个空套娃都算一步)才能达到. 容易发现,只有每条链链尾的匹配段可以不拆,其他的都得拆开. #i ...
- 【SAM】BZOJ2882-工艺
[题目大意] 求一个循环数列的最小表示法. [思路] 最小表示法的正解:★ SAM乱搞,和前面的POJ那道一样.然而MLE了,当作学习一下map的用法^ ^ map的使用方法(来源:☆) 一.map的 ...
- Problem G: 零起点学算法106——首字母变大写
#include<stdio.h> #include<string.h> int main(void) { ]; int i,k; while(gets(a)!=NULL) { ...
- 最小生成树之Prim算法--蓝白点思想
Prim算法: 以前一直不是很明白,Prim算法,今天就来终结一下. Prim算法采用与Dijkstra.Bellman-Ford算法一样的“蓝白点”思想:白点代表已经进入最小生成树的点,蓝点代表未进 ...