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 条评论
登录 后参与评论

相关文章

来自专栏赵俊的Java专栏

不用加减乘除做加法

1254
来自专栏专注 Java 基础分享

深入理解Java常用类-----时间日期

     除了String这个类在日常的项目中比较常用之外,有关时间和日期的操作也是经常遇到的,本篇就讲详细介绍下Java API中对时间和日期的支持。其实在J...

1908
来自专栏柠檬先生

Angularjs基础(四)

AngularJS过滤器     过滤器可以使用一个管道符(|)添加到表达式和指令中。       AngularJS过滤器可用于转换数据:    ...

1869
来自专栏一个会写诗的程序员的博客

MySql 计算两个日期的时间差函数

返回日期或日期时间表达式datetime_expr1 和datetime_expr2the 之间的整数差。其结果的 单位由interval 参数给出。inte...

461
来自专栏Ryan Miao

(转载)Java8新的日期API LocalDate, LocalTime

由于Java Date的各种问题,Java8推出了新的日期API,很受一拨人的追捧。

773
来自专栏Java学习网

教你在Java接口中定义方法

教你在Java接口中定义方法 基本上所有的Java教程都会告诉我们Java接口的方法都是public、abstract类型的,没有方法体的。 但是在JDK8里面...

2218
来自专栏java工会

Web项目中愉快的使用Java8日期API

1795
来自专栏函数式编程语言及工具

Scalaz(14)- Monad:函数组合-Kleisli to Reader

  Monad Reader就是一种函数的组合。在scalaz里函数(function)本身就是Monad,自然也就是Functor和applicative。我...

1675
来自专栏偏前端工程师的驿站

Java魔法堂:Date与日期时间格式化

一、前言                                                                            ...

1988
来自专栏Hongten

java中的移位运算符:<<,>>,>>>总结

value >>> num     --   num 指定要移位值value 移动的位数。

815

扫码关注云+社区