angular4点击事件监听_angular 事件广播和事件监听

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

angular4点击事件监听_angular 事件广播和事件监听相关推荐

Android 监听开机完成广播，完成监听SIM卡功能
2019独角兽企业重金招聘Python工程师标准>>> package com.zaizai.safty.Receiver; import android.content.Broad ...
angular4点击事件监听_JavaScript从零开始——DOM事件编程（1）
事件的本质是程序各个组成部分之间的一种通信方式,也是异步编程的一种实现.DOM 支持大量的事件,本章开始,我们一起看看 DOM 的事件编程. 1 概念 DOM 的事件操作(监听和触发),都定义在Eve ...
13、Java Swing事件监听：事件处理模型和事件监听器
事件表示程序和用户之间的交互,例如在文本框中输入,在列表框或组合框中选择,选中复选框和单选框,单击按钮等.事件处理表示程序对事件的响应,对用户的交互或者说对事件的处理是事件处理程序完成的. 当事件发生 ...
小程序监听android返回键,如何监听小程序返回按钮事件？
写在前面为了能及时的将自己踩到的前端坑(包括ionic,angular,react,ReactNative,小程序,APICloud)分享给大家,以后会逐渐将文章转移到微信公众号:前端e家(fron ...
移除元素所有事件监听_前端日记—DOM 事件机制和事件委托
DOM事件机制事件指的就是就是onclick,onmouseover,onmouseout等. 2002年W3C规定了浏览器的事件调用顺序标准,这其中有两个关键术语. 事件捕获:简单一点解释事件捕获 ...
高德地图marker事件监听-高德地图marker绑定事件就执行了[解决立即执行]
官方的demo是这样的: 地址:[http://lbs.amap.com/api/javascript-api/example/infowindow/add-infowindows-to-multip ...
VUE监听页面刷新和关闭事件
背景:公司有一个数据看板,,需求是要统计看板有多少人看过,,每个人停留的曝光时间使用技术:目前使用的技术是后端Springboot 权限用的是SpringSecurity,前端页面是 Vue+El ...
vue监听浏览器刷新和关闭事件，并在页面关闭/刷新前发送请求
vue监听浏览器刷新和关闭事件,并在页面关闭/刷新前发送请求 1.需求背景: 2.需求分析: 3.实现方式: 4.实现方式解析: 1)浏览器页面事件基础 2)在mounted监听beforeunloa ...
如何监听小程序返回按钮事件？
2020-06-09更新 //--------------------------2020-06-09更新-------------------开始-------------------------- ...
js 监听安卓事件_百行代码实现js事件监听实现跨页面数据传输
百行代码实现js事件监听实现跨页面数据传输使用场景类似消息队列的使用场景,支持同页面和跨页面通信,发送消息和接收消息技术原理跨页面通信: 基于事件监听,通过监听 storage事件监听回调机制 ...

angular4点击事件监听_angular 事件广播和事件监听

angular4点击事件监听_angular 事件广播和事件监听相关推荐

最新文章

热门文章