Angular $scope和$rootScope事件机制之$emit、$broadcast和$on
来源:互联网 发布:淘宝网康佳电视机丨7寸 编辑:程序博客网 时间:2024/05/16 09:21
Angular按照发布/订阅模式设计了其事件系统,使用时需要“发布”事件,并在适当的位置“订阅”或“退订”事件,就像邮箱里面大量的订阅邮件一样,当我们不需要时就可以将其退订了。具体到开发中,对应着$scope和$rootScope的$emit
、$broadcast
和$on
方法。本文介绍Angular的事件机制,包括$scope和$rootScope处理事件上的异同,$broadcast、$emit和$on的使用方式及他们区别等内容。
$scope与$scope之间的关系,$scope与$rootScope之间的关系
要理解Angular的事件机制,首先需要了解$scope
与$scope
之间的关系以及$scope
与$rootScope
之间的关系。$rootScope
是唯一真神,是万域起源,是所有$scope
的最终祖先。而$scope
与$scope
之间可能的关系包括父子关系和兄弟关系。还记得controller之间的关系吗,Angular为每个controller分配一个独立的$scope
,controller之间的关系也对应着$scope
之间的关系:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
发布、订阅、退订
$broadcast
和$emit
用于发布事件,他们将事件名称和事件内容发布出去,就像是高考榜单一样,事件名称相当于考生的名字,而事件内容相当于考生的成绩等信息:
- 1
- 2
$on
用于订阅事件,事件名称是订阅的唯一标识,每个考生看榜单时都要寻找自己的名字,然后根据自己的成绩等信息决定下一步应该报考什么学校:
- 1
- 2
- 3
Angular的退订事件有些奇怪,并没有类似于其他语言的$off
方法,所以不要想当然的按照如下方式进行事件的退订操作:
- 1
- 2
事实上,Angular的事件退订方法隐藏在事件订阅里面:使用$on
订阅事件时会返回一个函数,而此函数就是用来退订事件的方法,就像是考生看到了自己的成绩后禀告父母大人,“商量着”选取学校填报志愿,而此志愿单就是结束整个高考榜单的结束:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
$broadcast相当于战斗机轰炸,$emit相当于射箭
$broadcast
和$emit
都用于发布事件,但从名字就可以看出他们的不同点:$broadcast
是自上而下的广播,所有能听到的都可以对其进行反应。而$emit
是自下而上的射箭,只有在箭矢的轨迹上才能对其做出反应。
具体到Angular上,即从一个$scope
上通过$broadcast
发布的事件,他的所有后代$scope
都可以对此事件做出响应:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
而通过$emit
发布的事件,只有他的祖先$scope
可以做出响应,并且其中任一祖先都可以将此事件终结掉,不让其继续传播:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
在$emit
发布事件的响应道路上,其任一祖先如果感觉不再需要此事件了,就可以通过如下方式终结此事件:
- 1
- 2
- 3
- 4
- 5
- 6
$rootScope的$broadcast和$emit
上面说过$rootScope
是所有$scope
的最终祖先,所以通过$rootScope
的$broadcast
发布的事件可以被所有$scope
接收到,包括$rootScope
:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
而$rootScope
的$emit
就有些怪异了,按照上面的描述,$rootScope
是没有祖先的,所以我们可能会想到其$emit
会没有任何作用,但事实并不如此:$rootScope.$emit
发布的事件,只能通过$rootScope.$on
订阅,而其他$scope
对此一无所知:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
退订$rootScope上的订阅事件
当使用$rootScope.$on
订阅事件时,需要手动退订事件,一般在其所处$scope
的$destory
事件中退订:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
那通过$scope.$on
订阅的事件呢?一般不需要手动退订,因为Angular会帮我们退订,但是如果需要自己控制何时退订事件,也可以通过上述方式进行退订。
事件命名的建议
在开发中,对于变量的命名、函数的命名、文件的命名都有一定的规范,既要保证可读性,也需要保证无混淆性。在Angular的事件机制中,因为事件可能会跨函数,甚至可能跨文件,所以对于事件名一定要保证唯一性,所以建议事件名都加上特定的前缀,以便区分。如下几个例子:
- 1
- 2
- 3
- 4
- 5
结语
Angular的事件机制很智能,而且一般来说总能符合我们的预期,但是如果不能深入理解其背后的机制,可能会踏入某些深坑,本文尝试说明Angular的事件机制,如果有理解不正确的地方,请留言告知。
- Angular $scope和$rootScope事件机制之$emit、$broadcast和$on
- Angular $scope和$rootScope事件机制之$emit、$broadcast和$on
- Angular $scope和$rootScope事件机制之$emit、$broadcast和$on
- angular $on $emit $broadcast
- 理解angular中$rootscope和$scope
- Angular中$broadcast和$emit的使用方法
- angular中的$on、$emit、$broadcast
- AngularJS学习之路--- $on、$emit和$broadcast的使用
- AngularJS的 $on、$emit和$broadcast使用
- 理解angularjs中的$emit,$broadcast和$on
- 理解angularjs中的$emit,$broadcast和$on
- AngularJS $on、$emit和$broadcast的使用
- $on、$emit和$broadcast的使用
- 理解angularjs中的$emit,$broadcast和$on
- $on、$emit和$broadcast的使用
- AngularJS $on、$emit和$broadcast的使用
- AngularJS的学习--$on、$emit和$broadcast
- Angular 父子作用域之间交互($on、$emit和$broadcast)
- 数据块概述
- Android 支付宝以及微信支付快速接入流程
- 【腾讯面试题】判断机器的大小端存储方式。
- windows核心编程-如何关闭进程
- BITCS2016程序设计 | 25. 孤独的运货员
- Angular $scope和$rootScope事件机制之$emit、$broadcast和$on
- 解析Zigbee技术在智能家居应用中的优缺点
- Scraping a JSON response with Scrapy
- Android模块化与组件化--多模块区分编译
- Angular $scope和$rootScope事件机制之$emit、$broadcast和$on
- IO大串烧!!绝对经典.值得收藏!!
- mongodb集合对应的文件
- 彻底理解代理模式
- python数据结构学习笔记-2016-11-26-02-树结构