一,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. 线段树+哈希【CF580E】Kefa and Watch

    线段树+哈希[CF580E]Kefa and Watch Description \(n\)个数的字符串,\(m + k\)个操作 1 l r k把\(l - r\)赋值为\(k\) 2 l r d询 ...

  2. Bzoj3942 Censoring(KMP)

    \(KMP\)问题的核心在于数组\(next\)(或者\(pre\)/\(fail\),各种叫法),几乎所有的此类型题都是需要计算\(next\)的. 这里解释一波\(next\):即满足字符子串\( ...

  3. POJ 3662 Telephone Lines (分层图)

    Telephone Lines Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 6785   Accepted: 2498 D ...

  4. Windows下安装Memcached服务及安装PHP的Memcached扩展

    Memcached是一个自由开源的,高性能,分布式内存对象缓存系统. Memcached是一种基于内存的key-value存储,用来存储小块的任意数据(字符串.对象).这些数据可以是数据库调用.API ...

  5. [USACO 2018 Feb Gold] Tutorial

    Link: USACO 2018 Feb Gold 传送门 A: $dp[i][j][k]$表示前$i$个中有$j$个0且末位为$k$的最优解 状态数$O(n^3)$ #include <bit ...

  6. Codeforces Testing Round 14

    A:The Way to Home link:http://codeforces.com/contest/910/problem/A 题面:有每次最大跳跃距离d,只有一部分的点可以落脚,求最少几步达到 ...

  7. [SRM568]DisjointSemicircles

    题意:$2n$个位置排成一列,有一些位置已经填了数字($0\cdots n-1$中每个数字出现$0$次或$2$次),问是否存在一种填数方案使得用$n$个不相交的半圆可以把相同的数字连起来 首先把所有已 ...

  8. IRC程序学习

    %%聊天的中转站,将{chan,MM,Msg}形式的信息转化为 {mm, MM, Msg}形式 -module(mod_chat_controller). -export([start/3]). -i ...

  9. win7 64位 php环境开启curl服务Call to undefined function

    无法使用curl_init(),一般情况问题可能出在没有去加载php的扩展文件php_curl.dll(windows操作系统),但是检查了一下系统配置,发现,环境下已经将php.ini文件里 ;ex ...

  10. 简单理解SNAT回流中的概念:路由器怎么知道外网返回的数据是局域网中哪台主机的

    内网到外网用的是NAT技术(地址封装)外网到内网用的是端口映射(PNAT)计算机的端口又65535(0-65534),你说的那些有名气的端口大多都是0-1023之间的你说的这个问题很简单,但首先你要懂 ...