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

时间:2022-05-04
本文章向大家介绍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++;
	});
}

随机文章
Javascript知识点必读
最近更新