AngularJS事件发布机制

问题描述

未读邮件提醒

当器具用户或技术机构对非强制检验器具校准申请出具新的意见时，需要相互告知消息。

背景很简单。本文主要解决了在前台遇到的问题。

历史遗产

这是我的消息留下的统计未读消息的指令，用来缓存超级缓存。

乍一看，我们应该能发现这个if的问题.否则。在第一个请求之后，我们将数据放入缓存，然后从缓存中取出数据。这一定是个问题！原来，有一条消息，然后点击查看。那么这个指令仍然是从缓存中获取的数据，并且显示另一条消息。

angular.module('webappApp ')。指令(' yunzhiUnReadMessageCount ')，函数(ToMessageService，superCache){ return { template : ' '，Restrict: 'E '，//element link:函数post link (scope，Element) {//判断缓存中是否有未读消息if(superCache . Get的类型(' unremedmessagecount ')=' undefined '){//获取当前用户的所有未读接收消息：ToMessageService . page receiveunremessagefcurrentuser(undefined，function (data) {///显示文本信息元素. text(supercache . get(' unredmessagecount '))；});} else {//显示文本信息元素. text(supercache . get(' unredmessagecount '))；} } };});功能实现

注销时清除缓存

如果在注销时没有清除缓存，则上一个用户留下的缓存将在下一个用户登录时使用，从而导致信息提示错误。

读取时重新执行指令

下图是这个实现的难度。

用户有一条未读消息。当用户点击阅读此消息时，消息的状态被设置为已读，然后右上角的未读消息数被同时修改。但是，单击此事件发生在控制器中，并且消息是附加指令，因此它们之间没有联系。

AngularJS的本质是Scope，它是两个Scope。页面内容是我们的控制器范围，右上角的消息是我们的未读消息指令范围。

如果是简单的父子Scope关系，我们可以将参数从控制器传递给指令，并指示watch参数，让指令根据控制器的参数变化进行响应。但是这两个范围彼此无关。我们做什么呢

事件发布

查阅相关数据后，AngularJS中的Scope可以发布事件。

$broadcast(name，args)；

向下调度一个事件名称到所有子作用域(及其子作用域)，通知注册的$rootScope。范围侦听器。

将事件向下分发到他的所有子范围，并通知注册的范围。

$emit(name，args)；

通过作用域层次结构向上调度一个事件名称，通知注册的$rootScope。范围侦听器。

类似于$broadcast，只是这是用来向上发布事件的。

$on(名称，侦听器)；

侦听给定类型的事件。

听一听给定类型的事件。

示例说明了angularjs $broadcast $emit $on的用法

div ng-controller=' parent ctrl '/parent div ng-controller=' self ctrl '/拥有一个ng-click=' click()' click me/a div ng-controller=' child ctrl '/div//child/div ng-controller=' broctrl '/div//level

appcontrollers。控制器(' self ctrl '，函数($ scope){ $ scope。click=function(){ $ scope .$broadcast('to-child '，' child ')；$scope .$emit('to-parent '，' parent ')；} });appcontrollers。控制器(' ParentCtrl '，函数($scope) { $scope .$on('to-parent '，函数(d，数据){控制台。日志(数据)；//父级能得到值});$scope .$on('to-child '，函数(d，数据){控制台。日志(数据)；//子级得不到值});});appcontrollers。控制器('子ctrl '，函数($scope){ $scope .$on('to-child '，函数(d，数据){控制台。日志(数据)；//子级能得到值});$scope .$on('to-parent '，函数(d，数据){控制台。日志(数据)；//父级得不到值});});appcontrollers。控制器(' BroCtrl '，函数($scope){ $scope .$on('to-parent '，函数(d，数据){控制台。日志(数据)；//平级得不到值});$scope .$on('to-child '，函数(d，数据){控制台。日志(数据)；//平级得不到值});});点击点击我的输出结果

子家长

代码实现

$rootScope

考虑到这两个控制器与指令之间范围的关系，无论是向上还是向下可能都接收不到。

这里直接用$rootScope向下发布事件，保证所有范围都能获取到该事件。免得去考虑当前范围与目的范围之间的关系。

//广播发布重新加载消息计数事件，重新计算未读消息数量$rootScope .$ broadcast(' ReLoadmessageCount ')；因为考虑到各个层之间的职责关系，我认为：事件发布应该方法控制器中，而不应该放在服务中服务就等着被别人调用，不应该与其他文件有耦合关系，否则改起来很难改。

$on

重构指令，使用$on监听事件发布，执行相应的逻辑重新显示右上角的未读消息数。

angular.module('webappApp ').指令('云久ReadMessageCount '，函数(ToMessageService，superCache){ return { template : ' b ng-if=' count ' { count } } '，restrict: 'E '，//元素link:函数postLink(作用域){ var self=thisself。init=function(){ self。computemessagecount()；};//计算未读消息数量自我。computemessagecount=function(){//判断缓存中是否存在未读消息数量if(棱角分明。isundefined(超级跑车。get(' Unredmessagecount '){//获取当前用户的所有未读收件消息tomessageservice。page receiveunremessageofcurrentuser(未定义，函数（数据){ //存入缓存超级跑车。放入(' UnReadmessagecount '，数据。total ElEMENTs)；//显示范围。计数=超级跑车。get(' UnReadmessagecount ')；});} else { scope。计数=超级跑车。get(' UnReadmessagecount ')；} };//处理重新加载消息计数事件的处理逻辑范围$on('reloadMessageCount '，函数(){ //清除缓存超级跑车。移除(' UnReadmessagecount ')；//计算未读消息数量自我。computemessagecount()；});//初始化自我。init()；} };});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。