如何在作用域之间通信呢?
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的更多相关文章

  1. angularjs的$on、$emit、$broadcast

    如何在作用域之间通信呢? 1.创建一个单例服务,然后通过这个服务处理所有子作用域的通信. 2.通过作用域中的事件处理通信.但是这种方法有一些限制:例如,你并不能广泛的将事件传播到所有监控的作用域中.你 ...

  2. Angular $scope和$rootScope事件机制之$emit、$broadcast和$on

    Angular按照发布/订阅模式设计了其事件系统,使用时需要“发布”事件,并在适当的位置“订阅”或“退订”事件,就像邮箱里面大量的订阅邮件一样,当我们不需要时就可以将其退订了.具体到开发中,对应着$s ...

  3. AngularJS 事件广播与接收 $emit $broadcast $on

    AngularJS中的作用域scope有一个非常有层次和嵌套分明的结构. 其中它们都有一个主要的$rootScope(也就说对应的Angular应用或者ng-app),然后其他所有的作用域部分都是继承 ...

  4. angularjs事件通信$on,$emit,$broadcast详解

    公司项目开发用的是angularjs,关于事件通讯一直用的是EventBus,直到上周写一个小组件懒得引用EventBus时,想到用angularjs自带的事件通信时,结果很尴尬的忘记原生方法单词怎么 ...

  5. AngularJS的学习--$on、$emit和$broadcast的使用

    AngularJS中的作用域有一个非常有层次和嵌套分明的结构.其中它们都有一个主要的$rootScope(也就说对应的Angular应用或者ng-app),然后其他所有的作用域部分都是继承自这个$ro ...

  6. angularJS 系列(六)---$emit(), $on(), $broadcast()的使用

    下面以一个例子来讲述 angular 中的event system,有$emit(), $on(), $broadcast().效果图如下 下面的代码中,用到了 controller AS 的语法,具 ...

  7. angularjs中控制器之间的通信----$on、$emit和$broadcast解析

    $on.$emit和$broadcast使得event.data在controller之间的传递变的简单. $emit只能向parent controller传递event与data $broadca ...

  8. angularJS 事件广播与接收[转]

    路由的事件 事件这个词在前端出现的频率真是高,根本拦不住,哪都是.$route服务在路由过程中的每个阶段都会触发不同的事件,可以为这些不同的路由事件设置监听器并做出响应. 一共有4个事件用来监听路由的 ...

  9. angularJs--$on、$emit和$broadcast的使用

    $emit只能向parent controller传递event与data $broadcast只能向child controller传递event与data $on用于接收event与data 例子 ...

随机推荐

  1. 使用Android Studio开发调用.NET Webservice 之初体验

    本人是.NET出身 但苦于领导要让研究Android 外壳然后准备套html5  ,当试验兵真坑啊 但也没办法 咱还得研究啊,索性 不辜负领导的期望(也研究好两三天了)总算弄明白了 app本地存储 和 ...

  2. HDU 6305.RMQ Similar Sequence-笛卡尔树+数学期望 (2018 Multi-University Training Contest 1 1008)

    6305.RMQ Similar Sequence 这个题的意思就是对于A,B两个序列,任意的l,r,如果RMQ(A,l,r)=RMQ(B,l,r),B序列里的数为[0,1]的实数,B的重量为B的所有 ...

  3. java中的BigInteger

    头文件 import java.io.*; import java.math.*; 读入 Scanner cin = Scann(System.in); while(cin.hasNext()) &l ...

  4. C++之++运算符重载问题

    记录++之前先记一下左右值和存取数据的问题 数据的存放分三个部分,堆区,栈区和静态变量区 左值可以更改,右值不能更改 栈区和堆区存储的都是左值,可以随意更改其值,静态变量区部分数据是右值,比如cons ...

  5. hiho一下第130周 后缀自动机二·重复旋律7

    后缀自动机四·重复旋律7 时间限制:15000ms 单点时限:3000ms 内存限制:512MB 描述 小Hi平时的一大兴趣爱好就是演奏钢琴.我们知道一段音乐旋律可以被表示为一段数构成的数列. 神奇的 ...

  6. 【模拟】Friday the Thirteenth

    题目描述 Is Friday the 13th really an unusual event?That is, does the 13th of the month land on a Friday ...

  7. Strobogrammatic Number II -- LeetCode

    A strobogrammatic number is a number that looks the same when rotated 180 degrees (looked at upside ...

  8. 【poj1149】 pigs 网络流最大流问题

    描述 Description 尼克在一家养猪场工作,这家养猪场共有M间锁起来的猪舍,由于猪舍的钥匙都给了客户,所以尼克没有办法打开这些猪舍,客户们从早上开始一个接一个来购买生猪,他们到达后首先用手中的 ...

  9. 集合框架(中):Map

    Map接口: Map提供了一种映射关系,其中的元素就是以键值对(key-value)的形式存储的,能够实现根据key快速查找value Map中的键值对以Entry类型的对象实例形式存在 键(key值 ...

  10. Delphi TClientDataset查找定位功能

    if CDSUserFunc.Locate('mod_id;res_id', VarArrayOf([UserFunc.MOD_ID, UserFunc.RES_ID]), [loCaseInsens ...