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

一,angularjs $broadcast $emit $on的处理思想

在一个controller里面通过事件触发一个方法,在方法里面通过$broadcast或$emit来定义一个变量,在父,子controller里面通过$on来获取。

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

html代码: 

<div ng-controller="EventController">
    Root scope
    <tt>MyEvent</tt> count: {{count}}
	<ul>
		<li ng-repeat="i in [1]" ng-controller="EventController">
			<button ng-click="$emit('MyEvent')">
				$emit('MyEvent')
			</button>
			<button ng-click="$broadcast('MyEvent')">
				$broadcast('MyEvent')
			</button>
			<br>
			Middle scope
			<tt>MyEvent</tt> count: {{count}}
			<ul>
				<li ng-repeat="item in [1, 2]" ng-controller="EventController">
					Leaf scope
					<tt>MyEvent</tt> count: {{count}}
				</li>
			</ul>
		</li>
	</ul>
</div>

 JS代码:

function EventController($scope) {
	$scope.count = 0;
	$scope.$on('MyEvent', function() {
		$scope.count++;
	});
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏跟着阿笨一起玩NET

c#实现打印功能

2782
来自专栏杨龙飞前端

scrollto 到指定位置

2514
来自专栏大内老A

The .NET of Tomorrow

Ed Charbeneau(http://developer.telerik.com/featured/the-net-of-tomorrow/) Exciti...

31810
来自专栏码匠的流水账

聊聊NettyConnector的start及shutdown

reactor-netty-0.7.6.RELEASE-sources.jar!/reactor/ipc/netty/NettyConnector.java

851
来自专栏架构师之旅

【Java SE】Java NIO系列教程(九) ServerSocketChannel

英文:Jakob Jenkov 译文:ifeve - 郑玉婷 链接:http://ifeve.com/server-socket-channel/ Java N...

1976
来自专栏转载gongluck的CSDN博客

cocos2dx 打灰机

#include "GamePlane.h" #include "PlaneSprite.h" #include "BulletNode.h" #include...

5476
来自专栏Ceph对象存储方案

Luminous版本PG 分布调优

Luminous版本开始新增的balancer模块在PG分布优化方面效果非常明显,操作也非常简便,强烈推荐各位在集群上线之前进行这一操作,能够极大的提升整个集群...

3145
来自专栏pangguoming

Spring Boot集成JasperReports生成PDF文档

由于工作需要,要实现后端根据模板动态填充数据生成PDF文档,通过技术选型,使用Ireport5.6来设计模板,结合JasperReports5.6工具库来调用渲...

1.2K7
来自专栏落花落雨不落叶

canvas画简单电路图

62111
来自专栏我和未来有约会

Silverlight第三方控件专题

这里我收集整理了目前网上silverlight第三方控件的专题,若果有所遗漏请告知我一下。 名称 简介 截图 telerik 商 RadC...

4025

扫码关注云+社区