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

来源:http://www.cnblogs.com/CraryPrimitiveMan/p/3679552.html

AngularJS中的作用域有一个非常有层次和嵌套分明的结构。其中它们都有一个主要的$rootScope(也就说对应的Angular应用或者ng-app),然后其他所有的作用域部分都是继承自这个$rootScope的,或者说都是嵌套在主作用域下面的。很多时候,你会发现这些作用域不会共享变量或者说都不会从另一个原型继承什么。

那么在这种情况下,如何在作用域之间通信呢?其中一个选择就是在应用程序作用域之中创建一个单例服务,然后通过这个服务处理所有子作用域的通信。

在AngularJS中还有另外一个选择:通过作用域中的事件处理通信。但是这种方法有一些限制;例如,你并不能广泛的将事件传播到所有监控的作用域中。你必须选择是否与父级作用域或者子作用域通信。

$on、$emit和$broadcast使得event、data在controller之间的传递变的简单。

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

例子如下

html代码

复制代码
<div ng-controller="ParentCtrl">                <!--父级--><div ng-controller="SelfCtrl">              <!--自己--><a ng-click="click()">click me</a><div ng-controller="ChildCtrl"></div>   <!--子级--></div><div ng-controller="BroCtrl"></div>         <!--平级-->
</div>
复制代码

js代码

复制代码
app.controller('SelfCtrl', function($scope) {$scope.click = function () {$scope.$broadcast('to-child', 'child');$scope.$emit('to-parent', 'parent');}
});app.controller('ParentCtrl', function($scope) {$scope.$on('to-parent', function(event,data) {console.log('ParentCtrl', data);       //父级能得到值});$scope.$on('to-child', function(event,data) {console.log('ParentCtrl', data);       //子级得不到值});
});app.controller('ChildCtrl', function($scope){$scope.$on('to-child', function(event,data) {console.log('ChildCtrl', data);         //子级能得到值});$scope.$on('to-parent', function(event,data) {console.log('ChildCtrl', data);         //父级得不到值});
});app.controller('BroCtrl', function($scope){  $scope.$on('to-parent', function(event,data) {  console.log('BroCtrl', data);          //平级得不到值  });  $scope.$on('to-child', function(event,data) {  console.log('BroCtrl', data);          //平级得不到值  });  
});
复制代码

最终结果

ParentCtrl child

ChildCtrl parent

 

$emit和$broadcast可以传多个参数,$on也可以接收多个参数。

 

在$on的方法中的event事件参数,其对象的属性和方法如下

事件属性目的
event.targetScope发出或者传播原始事件的作用域
event.currentScope目前正在处理的事件的作用域
event.name事件名称
event.stopPropagation()一个防止事件进一步传播(冒泡/捕获)的函数(这只适用于使用`$emit`发出的事件)
event.preventDefault()这个方法实际上不会做什么事,但是会设置`defaultPrevented`为true。直到事件监听器的实现者采取行动之前它才会检查`defaultPrevented`的值。
event.defaultPrevented如果调用了`preventDefault`则为true

 

 

 

转载于:https://www.cnblogs.com/yansjhere/p/4044041.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/277099.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

17、【 商品管理模块开发】——后台商品图片的springmvc和富文本上传以及ftp文件服务器的开发...

1、FTP文件服务器的搭建&#xff1a; 软件下载&#xff1a;ftpserver&#xff1b; image.png浏览器访问&#xff1a;ftp://127.0.0.1/image.png点击任意一个文件&#xff0c;就可以看到我们图片啦&#xff0c;前提是前面指定的目录里面有图片文件~ image.png2、接口编写&#x…

我们常说……

从过完元旦到现在&#xff0c;乖乖在公司办公的时间很少&#xff0c;好多时候都是在外地&#xff0c;或者是在路上、车上。有n多次&#xff0c;乖乖一天至少坐6个小时的车&#xff0c;回到家里都是带着一身的疲惫&#xff0c;虽然他并不表现出来&#xff0c;但是因为长时间坐车…

那些油管上高质量的学习编程的频道 之一

国内确实有很多不错的学习编程的网站或者个人博客&#xff0c;但是对于初学者&#xff0c;往往更希望获得那种引导性的教学&#xff1a;即一步一步的教你跟着操作的教学。这种教学最好的方式当然就是视频了。毕竟在Apple Podcast上超火爆的斯坦福教授iOS开发的课程也是这种形式…

SQL Server 2005 Express附加(Attach)的数据库为“只读”的解决方法

我的操作系统为Windows 2003 Server , 文件系统NTFS, 在SQL Server 2005 Express 上附加(Attach)从另外一台电脑Copy过来的数据库后&#xff0c;数据库为“只读”。如下图&#xff1a; 解决办法&#xff1a; 打开 SQL Server Configuration Manager, 打开SQL Server SQLEXPRESS…

[导入]blog年终小结

1. 2006-11-30 注册了本域名thws.cn&#xff0c;喜欢的thw.com被注册了&#xff0c;只好退而就其次了&#xff1b;2. 12-20在alexa上登陆站点&#xff0c;综合排名从起初490多万上升到现在的590327,下期566,880&#xff1b;3. 2007-1-11适逢google PR更新&#xff0c;PR值从0变…

Maven学习笔记(2) --mvn archetype:create 说明

前面一篇相对比较简单。 看完前面的内容我们会来到实战部分&#xff0c;也就是创建一个简单的项目 1 mvn archetype:create -DgroupIdorg.sonatype.mavenbook.ch03 \ 2 -DartifactIdsimple \ 3 -DpackageNameorg.sonatype.mavenbook 于是我们得到了步入Maven领域的第一份打击 真…

UI设计:C4D作品案例分享

中文名4D电影&#xff0c;外文名CINEMA 4D&#xff0c;研发公司为德国Maxon Computer&#xff0c;特点为极高的运算速度和强大的渲染插件&#xff0c;使用在电影《毁灭战士》、《阿凡达》中&#xff0c;获得贸易展中最佳产品’的称号&#xff0c;前身为FastRay。CINEMA 4D拥有快…

又是一个人的情人节

又是一个人的情人节 上午送完弟弟返乡的车&#xff0c;回家的心情也越来越迫切&#xff0c;很想立刻回到家里&#xff0c;和老爸老妈唠叨唠叨&#xff0c;和一年未见的堂兄弟一起喝喝酒&#xff0c;玩耍玩耍&#xff0c;那种心情真是没有办法形容&#xff0c;在我个人看来&…

C# Global.asax.cs 定时任务

定时执行更新Redis缓存操作 protected void Application_Start(object sender, EventArgs e) {Timer timer new Timer();timer.Enabled true;timer.Interval 3600000; //执行间隔时间,单位为毫秒; 这里实际间隔为1小时 timer.Start();timer.Elapsed new System.Timers.Ela…

给div拼接html 拼接字符串

简单描述&#xff1a;拼接html 拼接字符串&#xff0c;说实话&#xff0c;拼接这种东西我自己弄&#xff0c;得花费很多时间&#xff0c;主要是转义字符&#xff0c;单引号&#xff0c;双引号这种小细节调整起来比较麻烦&#xff0c;一旦疏忽多了少了一个符号&#xff0c;页面就…

P2587 [ZJOI2008]泡泡堂 神仙贪心

思路&#xff1a;贪心 提交&#xff1a;1次&#xff08;看了题解$QwQ$&#xff09; 题解&#xff1a; 若我方最弱可以干掉对方最弱&#xff0c;则干&#xff1b; 否则若我方最强可以干掉对方最强&#xff0c;则干&#xff1b; 否则若我方最弱与对方最强平手&#xff0c;则平&am…

LifeCycle源码解读

对于LifeCycle的简单使用可以看上一篇文章&#xff1a;LiveDataViewModelRepository搭建MVVM 这篇文章主要是为了阅读源码&#xff0c;尽量深入阅读&#xff0c;能力还是一般&#xff0c;见谅&#xff1a; LifeCycle的作用 解决onCreate等生命周期方法&#xff0c;由于各种原因…

Microsoft SQL Server 2005 Service Pack 2 已经可以下载

下载地址为http://www.microsoft.com/downloads/details.aspx?FamilyIDd07219b2-1e23-49c8-8f0c-63fa18f26d3a&DisplayLangzh-cn嘿嘿,这么快就SP2了 转载于:https://www.cnblogs.com/lazerjulysky/archive/2007/03/04/663279.html

单点登录(sso)入门

单点登录的英文名叫做Single Sign On&#xff0c;简称SSO。 在以前&#xff0c;一般我们就单系统&#xff0c;所有的功能都在同一个系统上。 后来&#xff0c;我们为了合理利用资源和降低耦合性&#xff0c;于是把单系统拆分成多个子系统。 比如阿里系的淘宝和天猫&#xff0c;…

Cocopods的升级错误解决

2019独角兽企业重金招聘Python工程师标准>>> 写在前面&#xff1a; 这篇笔记的由来&#xff0c;是因为在这个周五下班后想起了之前 GitHub 上一个关于 iOS Charts 的 demo 仍处于未完待续的状态。便想着完成了它&#xff0c;遂打开了该工程&#xff0c;开始用 pod 更…

XML 命名空间以及它们如何影响 XPath 和 XSLT (Extreme XML)

Dare Obasanjo Microsoft Corporation 2002 年 5 月 20 日 本文是有望长期发表的系列文章的第一篇&#xff0c;这些文章专门阐释由 Microsoft 支持的 W3C XML 技术的更微妙的内容。尽管 XML 的核心仍相当简单&#xff0c;但是围绕它的技术已经变得日益复杂&#xff0c;而且其中…

帆软报表(finereport)点击事件对话框打开

点击事件对话框打开iframe var iframe $("<iframe id001 name001 width100% height100% scrollingyes frameborder0>") // iframe参数的命名及宽高等iframe.attr("src", "http://192.168.100.17:8075/WebReport/ReportServer?reportlet1.cpt&…

部署虚拟环境

创建虚拟环境 导入Virtualenv虚拟环境模块 pip install virtualenv python -m pip install virtualenv 创建虚拟环境 cd 项目文件夹 virtualenv 虚拟环境名 激活虚拟环境 cd 虚拟环境文件夹 运行 Scripts 目录下的 activate 脚本 Scripts\activate 退出当前虚拟环境 Scripts\d…

走马观花:Visual Studio Code Name Orcas Mar07CTP /体验DLINQ

不知道什么叫“Orcas”&#xff1f;简单说应该就是下一版本的Visual Studio 吧。现在atlas&#xff0c;LINQ&#xff0c;WF之类东西&#xff0c;对于VS2005是单独安装的&#xff0c;Orcas应该是全内置吧。还有很多功能的增强&#xff0c;可以参考英文说明。闲话不说&#xff0c…

各种学习资源

C&#xff1a;http://huangdingjun.blog.163.com/ 网易博客 有好多关于C的博文 http://hi.baidu.com/dudiaodaoke/home独钓刀客 vim&#xff1a;http://easwy.com/blog/ vim linux 牛人 http://www.swaroopch.com/notes/Vim_zh-cn:%E7%A8%8B%E5%BA%8F%E5%91%98%E7%9A%84%E7%BC…