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

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

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

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

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

$emit只能向parent controller传递event与data
$broadcast只能向child controller传递event与data
$on用于接收event与data
例子如下

html代码

click me
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190117150710700.png) js代码 app.controller('SelfCtrl', function($scope) { $scope.click = function () { $scope.$broadcast('to-child', 'child'); $scope.$emit('to-parent', 'parent'); } });

app.controller(‘ParentCtrl’, function($scope) {
s c o p e . scope. scope.on(‘to-parent’, function(event,data) {
console.log(‘ParentCtrl’, data); //父级能得到值
});
s c o p e . scope. scope.on(‘to-child’, function(event,data) {
console.log(‘ParentCtrl’, data); //子级得不到值
});
});

app.controller(‘ChildCtrl’, function($scope){
s c o p e . scope. scope.on(‘to-child’, function(event,data) {
console.log(‘ChildCtrl’, data); //子级能得到值
});
s c o p e . scope. scope.on(‘to-parent’, function(event,data) {
console.log(‘ChildCtrl’, data); //父级得不到值
});
});

app.controller(‘BroCtrl’, function($scope){
s c o p e . scope. scope.on(‘to-parent’, function(event,data) {
console.log(‘BroCtrl’, data); //平级得不到值
});
s c o p e . scope. scope.on(‘to-child’, function(event,data) {
console.log(‘BroCtrl’, data); //平级得不到值
});
});
在这里插入图片描述
最终结果

ParentCtrl parent

ChildCtrl child
e m i t 和 emit和 emitbroadcast可以传多个参数, o n 也 可 以 接 收 多 个 参 数 。 在 on也可以接收多个参数。 在 onon的方法中的event事件参数,其对象的属性和方法如下

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

感觉比service在不同controller中通信要方便许多~~

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值