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 例子 ...
 
随机推荐
- SQL Server 预编译执行SQLs
			
问题描述: MVC5项目,利用执行sql的方式获取数据,但是在利用预编译执行的时候报错了,字段XXXwhich was not supplied. 其实就是这个参数传了个null导致的.在传参数之前做 ...
 - 链式前向星BFS
			
本文链接:http://i.cnblogs.com/EditPosts.aspx?postid=5399068 采用链式前向星的BFS: #include <iostream> #incl ...
 - HDU 2016.11.12 做题感想
			
细数一下这两天做过的值得总结的一些题Orz...... HDU 2571 简单dp,但是一开始WA了一发.原因很简单:没有考虑仔细. 如果指向该点的所有点权值都为负数,那就错了(我一开始默认初始值为0 ...
 - Python Unittest与数据驱动
			
python中有一个装饰器类DDT,通过它我们可以复用代码,达到数据驱动测试的目的,该类的官方介绍可以参考 http://ddt.readthedocs.io/en/latest/index.html ...
 - (寒假集训)洛谷  P2058 海港
			
小K是一个海港的海关工作人员,每天都有许多船只到达海港,船上通常有很多来自不同国家的乘客. 小K对这些到达海港的船只非常感兴趣,他按照时间记录下了到达海港的每一艘船只情况:对于第i艘到达的船,他记录了 ...
 - 解魔方的机器人攻略15 – 安装 Eclipse
			
由 动力老男孩 发表于 2009/12/27 17:40:49 在远古时代,程序员们通常用写字板来编写Java程序,然后用Javac.exe和Java.exe来编译和执行.对于NXT来说,对应的命令是 ...
 - 工作组模式下专用队列(Private Queue)如何引用远程队列路径
			
查了N久资料,包括MSDN的官方文档,对于同一工作组下,不同机器之间如何利用Private Queue(专用队列)来发送/接收消息,关于Path的引用一说,无非都是MachineName\privat ...
 - Android简单的利用MediaRecorder进行录音的实例代码
			
MainActivity.java package com.example.soundrecord_demo; import java.io.IOException; import android.m ...
 - jquery验证表单代码
			
代码如下: //开始验证-修改用户密码 $('.editUserPwd').validate({ /**//* 设置验证规则 */ rules: { lname:{ required:true, st ...
 - ubuntu live cd修复grub引导项
			
1. 通过Ubuntu Live CD(安装盘,选择try Ubuntu)进入Ubuntu系统 打开终端,依次进行如下操作: 1. sudo fdisk -l 出现如下界面: 2. 然后会看到,有好多 ...