一,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. 【C语言期末实训】学生学籍管理系统

    目录: 一,设计要求 ,总体要求: ,具体功能: 二,设计框架 三,程序代码 ,声明函数和头文件 ,声明结构体 ,声明全局变量 ,主体启动函数 ,主菜单函数 ,创建学生档案函数 ,编辑学生档案函数 , ...

  2. 洛谷——P2082 区间覆盖(加强版)

    P2082 区间覆盖(加强版) 题目描述 已知有N个区间,每个区间的范围是[si,ti],请求出区间覆盖后的总长. 输入输出格式 输入格式: N s1 t1 s2 t2 …… sn tn 输出格式: ...

  3. Flask实战第57天:UEditor编辑器集成以及配置上传文件到七牛

    相关链接 UEditor:http://ueditor.baidu.com/website/​ 下载地址:http://ueditor.baidu.com/website/download.html# ...

  4. Python开发基础-Day18继承派生、组合、接口和抽象类

    类的继承与派生 经典类和新式类 在python3中,所有类默认继承object,但凡是继承了object类的子类,以及该子类的子类,都称为新式类(在python3中所有的类都是新式类) 没有继承obj ...

  5. [P4064][JXOI2017]加法(贪心+树状数组+堆)

    题目描述 可怜有一个长度为 n 的正整数序列 A,但是她觉得 A 中的数字太小了,这让她很不开心. 于是她选择了 m 个区间 [li, ri] 和两个正整数 a, k.她打算从这 m 个区间里选出恰好 ...

  6. 【推导】【贪心】XVII Open Cup named after E.V. Pankratiev Stage 14, Grand Prix of Tatarstan, Sunday, April 2, 2017 Problem D. Clones and Treasures

    给你一行房间,有的是隐身药水,有的是守卫,有的是金币. 你可以任选起点,向右走,每经过一个药水或金币就拿走,每经过一个守卫必须消耗1个药水,问你最多得几个金币. 药水看成左括号,守卫看成右括号, 就从 ...

  7. 设计BBS

    功能分析: 1 登陆功能(基于ajax,图片验证码) 2 注册功能(基于ajax,基于forms验证) 3 博客首页 4 个人站点 5 文章详情 6 点赞,点踩 7 评论 --根评论 --子评论 8 ...

  8. 计算gcd Exercise07_14

    import java.util.Scanner; /** * @author 冰樱梦 * 时间:2018年下半年 * 题目:计算gcd * */ public class Exercise07_14 ...

  9. Erlang学习记录(二)——基本数据类型

    Erlang可以说和我以前接触过的语言都大不相同,这个从它的类型定义就可以看出来...反正学起来觉得既不熟悉,也不亲切,我估计在用Erlang写应用的时候,整个编程思路都要变一下了.不过存在即是合理的 ...

  10. POJ 2139 Six Degrees of Cowvin Bacon (弗洛伊德最短路)

    题意:奶牛拍电影,如果2个奶牛在同一场电影里演出,她们的合作度是1,如果ab合作,bc合作,ac的合作度为2,问哪一头牛到其他牛的合作度平均值最小再乘100 思路:floyd模板题 #include& ...