angularjs事件传递$on、$emit和$broadcast
如何在作用域之间通信呢?
1.创建一个单例服务,然后通过这个服务处理所有子作用域的通信。
2.通过作用域中的事件处理通信。但是这种方法有一些限制;例如,你并不能广泛的将事件传播到所有监控的作用域中。你必须选择是否与父级作用域或者子作用域通信。 $on、$emit和$broadcast使得event、data在controller之间的传递变的简单。
$emit:子传父 传递event与data
$broadcast:父传子 child controller传递event与data
$on:监听或接收数据。。用于接收event与data $broadcast、$emit事件必须依靠其他事件(ng-click等)进行触发,而不能单纯写一个这个。。
$on倒是可以直接写,因为它属于监听和接收数据的。 $on的方法中的event事件参数:
event.name 事件名称
event.targetScope 发出或者传播原始事件的作用域
event.currentScope 目前正在处理的事件的作用域 event.stopPropagation() 一个防止事件进一步传播(冒泡/捕获)的函数(这只适用于使用`$emit`发出的事件)
event.preventDefault() 这个方法实际上不会做什么事,但是会设置`defaultPrevented`为true。直到事件监听器的实现者采取行动之前它才会检查`defaultPrevented`的值。
event.defaultPrevented 如果调用了`preventDefault`则为true

1 <style>
2 div{border:1px solid #ff7300;padding:20px;margin:10px;border-radius: 5px;}
3 </style>
4 <div ng-controller="ParentController"><!--父级-->
5 <div ng-click="clkP()">click--给child</div>
6 <div ng-controller="OneSelfController"><!--自己-->
7 <span ng-click="clkme()">click me</span>
8 <div ng-controller="ChildController">
9 它是OneSelfController的子级
10 </div><!--子级-->
11 </div>
12 <div ng-controller="siblingsController">
13 它与OneSelfController是平级
14 </div><!--平级-->
15 </div>
16
17 <script>
18 var app=angular.module('firstApp',[]);//app模块名
19 app.controller('OneSelfController',function($scope){
20 $scope.clkme=function(){
21 $scope.$broadcast('sendChild','我给子控制器传递数据');
22 $scope.$emit('sendParent','冒泡到父元素')
23 }
24 }).controller('ParentController',function($scope){
25 $scope.$on('sendParent',function(event,data){//监听在子控制器中定义的 sendParent 事件
26 console.log('OneSelfController传过来的',data,event.name,event);//事件名称:sendParent
27 });
28 $scope.clkP=function(){
29 $scope.$broadcast('sendAllChild','让siblingsController接收到');
30 }
31
32 }).controller('ChildController', function($scope){
33 $scope.$on('sendChild', function(event,data) {//监听在子控制器中定义的 sendChild 事件
34 console.log('ChildCtrl', data,event.name,event);// 事件名称:sendChild
35 });
36 }).controller('siblingsController', function($scope){
37 $scope.$on('sendAllChild',function(event,data) {
38 console.log('值过来吧', data);
39 });
40 //下面事件不会触发
41 $scope.$on('sendParent', function(event,data) {
42 console.log('平级得不到值', data);
43 });
44 $scope.$on('sendChild', function(event,data) {
45 console.log('平级得不到值', data);
46 });
47 });
48
49 </script>

angularjs事件传递$on、$emit和$broadcast的更多相关文章
- angularjs的$on、$emit、$broadcast
如何在作用域之间通信呢? 1.创建一个单例服务,然后通过这个服务处理所有子作用域的通信. 2.通过作用域中的事件处理通信.但是这种方法有一些限制:例如,你并不能广泛的将事件传播到所有监控的作用域中.你 ...
- Angular $scope和$rootScope事件机制之$emit、$broadcast和$on
Angular按照发布/订阅模式设计了其事件系统,使用时需要“发布”事件,并在适当的位置“订阅”或“退订”事件,就像邮箱里面大量的订阅邮件一样,当我们不需要时就可以将其退订了.具体到开发中,对应着$s ...
- AngularJS 事件广播与接收 $emit $broadcast $on
AngularJS中的作用域scope有一个非常有层次和嵌套分明的结构. 其中它们都有一个主要的$rootScope(也就说对应的Angular应用或者ng-app),然后其他所有的作用域部分都是继承 ...
- angularjs事件通信$on,$emit,$broadcast详解
公司项目开发用的是angularjs,关于事件通讯一直用的是EventBus,直到上周写一个小组件懒得引用EventBus时,想到用angularjs自带的事件通信时,结果很尴尬的忘记原生方法单词怎么 ...
- AngularJS的学习--$on、$emit和$broadcast的使用
AngularJS中的作用域有一个非常有层次和嵌套分明的结构.其中它们都有一个主要的$rootScope(也就说对应的Angular应用或者ng-app),然后其他所有的作用域部分都是继承自这个$ro ...
- angularJS 系列(六)---$emit(), $on(), $broadcast()的使用
下面以一个例子来讲述 angular 中的event system,有$emit(), $on(), $broadcast().效果图如下 下面的代码中,用到了 controller AS 的语法,具 ...
- angularjs中控制器之间的通信----$on、$emit和$broadcast解析
$on.$emit和$broadcast使得event.data在controller之间的传递变的简单. $emit只能向parent controller传递event与data $broadca ...
- angularJS 事件广播与接收[转]
路由的事件 事件这个词在前端出现的频率真是高,根本拦不住,哪都是.$route服务在路由过程中的每个阶段都会触发不同的事件,可以为这些不同的路由事件设置监听器并做出响应. 一共有4个事件用来监听路由的 ...
- angularJs--$on、$emit和$broadcast的使用
$emit只能向parent controller传递event与data $broadcast只能向child controller传递event与data $on用于接收event与data 例子 ...
随机推荐
- [BZOJ1070][SCOI2007]修车 费用流
1070: [SCOI2007]修车 Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 6209 Solved: 2641[Submit][Status] ...
- MSSQL删除重复记录
SQL(根据自己需要改列名.表名): delete from tableA where id not in (select min(id) from tableA group by name,age)
- HDU 6271 Master of Connected Component(2017 CCPC 杭州 H题,树分块 + 并查集的撤销)
题目链接 2017 CCPC Hangzhou Problem H 思路:对树进行分块.把第一棵树分成$\sqrt{n}$块,第二棵树也分成$\sqrt{n}$块. 分块的时候满足每个块是一个 ...
- La 4976 Defense lines
蓝书紫书上都有的一道题...这里就懒得说题解了. 但是我竟然WA了6次!为什么呢??? 一开始没看见连续子序列..... 后来插入的时候忘判断了是不是比前驱大.... 所以我们只需要维护一个权值递增( ...
- [BZOJ1179][APIO2009][强连通分量Tarjan+spfa]ATM
[BZOJ1179][APIO2009]ATM Input 第一行包含两个整数N.M.N表示路口的个数,M表示道路条数.接下来M行,每行两个整数,这两个整数都在1到N之间,第i+1行的两个整数表示第i ...
- [读书笔记] CSS揭秘-背景与边框
半透明边框 默认情况下,背景会延伸到边框所在的区域下层.可以通过background-clip属性调整该默认行为. border: 10px solid rgba(0,0,0,.2) backgrou ...
- Java 根据年月日精确计算年龄
import java.text.SimpleDateFormat; import java.util.Calendar; import java.util.Date; /** * Created b ...
- Delphi Modbus RTU CRC16校验码
function CheckCrc16(const ABuf; ALen: Integer): Boolean;var uwTemp: WORD; i, j: BYTE; P: PByte;begin ...
- WIN10 64位 JDK的安装
因为电脑系统换掉,重装系统,重新配置了一下环境,安装JDK,现记录一下过程,以便下次查询使用. 官网下载JDK,地址:http://www.oracle.com/technetwork/java/ja ...
- Linux如何查看当前占用CPU或内存最多的几个进程
1. ps命令 ps -aux | sort -k4nr | head -N *命令详解: 1. head:-N可以指定显示的行数,默认显示10行. 2. ps:参数a指代all——所有的进程,u指代 ...