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 例子 ...
随机推荐
- React+React Router+React-Transition-Group实现页面左右滑动+滚动位置记忆
2018年12月17日更新: 修复在qq浏览器下执行pop跳转时页面错位问题 本文的代码已封装为npm包发布:react-slide-animation-router 在React Router中,想 ...
- 树链剖分【p3178】[HAOI2015]树上操作
Description 有一棵点数为 N 的树,以点 1 为根,且树点有边权.然后有 M 个操作,分为三种:操作 1 :把某个节点 x 的点权增加 a .操作 2 :把某个节点 x 为根的子树中所有点 ...
- 洛谷——P3395 路障
P3395 路障 题目背景 此题约为NOIP提高组Day1T1难度. 题目描述 B君站在一个n*n的棋盘上.最开始,B君站在(1,1)这个点,他要走到(n,n)这个点. B君每秒可以向上下左右的某个方 ...
- SPOJ 3267 DQUERY - D-query (主席树)(区间数的种数)
DQUERY - D-query #sorting #tree English Vietnamese Given a sequence of n numbers a1, a2, ..., an and ...
- 六. 异常处理4.try和catch的使用
尽管由Java运行时系统提供的默认异常处理程序对于调试是很有用的,但通常你希望自己处理异常.这样做有两个好处.第一,它允许你修正错误.第二,它防止程序自动终止.大多数用户对于在程序终止运行和在无论何时 ...
- 在K8s中创建StatefulSet
在K8s中创建StatefulSet 遇到的问题: 使用Deployment创建的Pod是无状态的,当挂在Volume之后,如果该Pod挂了,Replication Controller会再run一个 ...
- selenium 自动化测试 测试报告 生成
https://www.cnblogs.com/yoyoketang/p/6140439.html https://www.cnblogs.com/testyao/p/5658200.html 一.下 ...
- selenium控制浏览器为手机模式
# -*- coding: utf-8 -*- from selenium import webdriver from time import sleep mobileEmulation = {'de ...
- Vue表单和组件
一.表单 v-model 指令在表单控件元素上创建双向数据绑定,v-model 会根据控件类型自动选取正确的方法来更新元素. <input v-model="message" ...
- 如果你还有以下这些现象,那你仍是PHP菜鸟:
最近看了个文章,写的很精辟,跟大家分享一下,这也是我的目标: 如果你还有以下这些现象,那你仍是PHP菜鸟:1. 不会利用如phpDoc这样的工具来恰当地注释你的代码:2. 对优秀的集成开发环境如Zen ...