AngularJS $on、$emit和$broadcast简单功能实例

来源：互联网发布：1元域名注册编辑：程序博客网时间：2024/06/14 03:34

我们知道，AngularJS的作用域是类似于JavaScript的原型继承的原理，作用于之间有一定的层次关系。AngularJS的每个作用域都有一个$rootScope的根作用域，其他的作用域

继承于这个作用域。但是很多作用域之间没有继承关系。在这种情况下，我们无法进行作用域之间的通信。解决这个问题

方法之一：在应用程序作用域中创建一个单例服务，用来解决所有子作用域之间的通信。

方法之二：通过AngularJS中的事件解决作用域之间的通信。即：

$emit：广播给父controller

$broadcast：广播给子controller

$on：有两个参数function(event,data)，第一个参数是事件对象，第二个是接收到的消息。

$emit、$broadcast的局限在于他们只能分别向父controller和子controller传播。

例子:

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代码：

var myModule = angular.module('MyModule',[]);myModule.controller('SelfCtrl', function($scope) {$scope.click = function() {$scope.$broadcast('to-child', '我是来自$broadcast');$scope.$emit('to-parent', '我是来自$emit');}});myModule.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); // 子级得不到值});});myModule.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); // 父级得不到值});});myModule.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); // 平级得不到值});});

结果：

ChildCtrl我是来自$broadcast

ParentCtrl我是来自$emit

本文来自：（http://www.it165.net/pro/html/201404/12610.html）

0 0