AngularJS 事件發(fā)布機(jī)制
問(wèn)題描述
未讀消息提醒
當(dāng)器具用戶(hù)或技術(shù)機(jī)構(gòu)對(duì)非強(qiáng)檢器具檢校申請(qǐng)發(fā)布新的意見(jiàn)時(shí),需要對(duì)對(duì)方進(jìn)行消息通知。
后臺(tái)很簡(jiǎn)單,本文主要解決前臺(tái)遇到的問(wèn)題。
歷史遺留
這是我的消息遺留下來(lái)的統(tǒng)計(jì)未讀消息的指令,用到了緩存superCache
。
一眼看去應(yīng)該能發(fā)現(xiàn)這個(gè)if...else
的問(wèn)題,第一次請(qǐng)求,將數(shù)據(jù)放到緩存里,之后就一直從緩存中取了,這肯定有問(wèn)題??!原來(lái)有1
條消息,然后點(diǎn)擊查看,然后這個(gè)指令仍然是從緩存中取的數(shù)據(jù),還顯示一條。
angular.module('webappApp') .directive('yunzhiUnReadMessageCount', function(ToMessageService, superCache) { return { template: '', restrict: 'E', // 元素 link: function postLink(scope, element) { // 判斷緩存中是否存在未讀消息數(shù)量 if (typeof superCache.get('unReadMessageCount') === 'undefined') { // 獲取當(dāng)前用戶(hù)的所有未讀收件消息 ToMessageService.pageReceiveUnReadMessageOfCurrentUser(undefined, function(data) { // 存入緩存 superCache.put('unReadMessageCount', data.totalElements); // 顯示文本信息 element.text(superCache.get('unReadMessageCount')); }); } else { // 顯示文本信息 element.text(superCache.get('unReadMessageCount')); } } }; });
功能實(shí)現(xiàn)
注銷(xiāo)時(shí)清除緩存
注銷(xiāo)時(shí)如果不清除緩存,下一個(gè)用戶(hù)登錄時(shí)用的就是上一用戶(hù)留下來(lái)的緩存,造成信息提示錯(cuò)誤。
閱讀時(shí)重新執(zhí)行指令
下圖就是該實(shí)現(xiàn)的難點(diǎn)。
該用戶(hù)有一條未讀消息,當(dāng)用戶(hù)點(diǎn)擊閱讀這條消息時(shí),將該消息的狀態(tài)設(shè)置為已讀,然后右上角的未讀條數(shù)同時(shí)修改。但是點(diǎn)擊這個(gè)事件是發(fā)生在控制器中,而消息又是一個(gè)額外的指令,兩者毫無(wú)聯(lián)系。
AngularJS
的精髓就是Scope
,這是兩個(gè)Scope
,頁(yè)面內(nèi)容是我們的控制器Scope
,右上角的消息處是我們的未讀消息指令Scope
。
如若是簡(jiǎn)單的父子Scope
關(guān)系,我們可以從控制器傳參數(shù)到指令,指令watch
這個(gè)參數(shù),根據(jù)控制器對(duì)參數(shù)的變動(dòng)讓指令做出響應(yīng)。但是這兩個(gè)Scope
毫無(wú)關(guān)系,我們?cè)趺崔k呢?
事件發(fā)布
查閱了相關(guān)資料,AngularJS
中Scope
可以發(fā)布事件。
$broadcast(name, args);
Dispatches an event name downwards to all child scopes (and their children) notifying the registered $rootScope.Scope listeners.
向下分發(fā)一個(gè)事件給他的所有子Scope
,通知已注冊(cè)的Scope
。
$emit(name, args);
Dispatches an event name upwards through the scope hierarchy notifying the registered $rootScope.Scope listeners.
與$broadcast
類(lèi)似,只不過(guò)這個(gè)是用來(lái)向上發(fā)布事件的。
$on(name, listener);
Listens on events of a given type.
監(jiān)聽(tīng)一個(gè)給定類(lèi)型的事件。
實(shí)例說(shuō)明angularjs $broadcast $emit $on的用法
<div ng-controller="ParentCtrl"> //父級(jí) <div ng-controller="SelfCtrl"> //自己 <a ng-click="click()">click me</a> <div ng-controller="ChildCtrl"></div> //子級(jí) </div> <div ng-controller="BroCtrl"></div> //平級(jí) </div>
js代碼
appControllers.controller('SelfCtrl', function($scope) { $scope.click = function () { $scope.$broadcast('to-child', 'child'); $scope.$emit('to-parent', 'parent'); } }); appControllers.controller('ParentCtrl', function($scope) { $scope.$on('to-parent', function(d,data) { console.log(data); //父級(jí)能得到值 }); $scope.$on('to-child', function(d,data) { console.log(data); //子級(jí)得不到值 }); }); appControllers.controller('ChildCtrl', function($scope){ $scope.$on('to-child', function(d,data) { console.log(data); //子級(jí)能得到值 }); $scope.$on('to-parent', function(d,data) { console.log(data); //父級(jí)得不到值 }); }); appControllers.controller('BroCtrl', function($scope){ $scope.$on('to-parent', function(d,data) { console.log(data); //平級(jí)得不到值 }); $scope.$on('to-child', function(d,data) { console.log(data); //平級(jí)得不到值 }); });
點(diǎn)擊Click me的輸出結(jié)果
child
parent
代碼實(shí)現(xiàn)
$rootScope
考慮到這兩個(gè)控制器與指令之間Scope
的關(guān)系,無(wú)論是向上還是向下可能都接收不到。
這里直接用$rootScope
向下發(fā)布事件,保證所有Scope
都能獲取到該事件。免得去考慮當(dāng)前Scope
與目的Scope
之間的關(guān)系。
// 廣播發(fā)布reloadMessageCount事件,重新計(jì)算未讀消息數(shù)量 $rootScope.$broadcast('reloadMessageCount');
因?yàn)榭紤]到各個(gè)層之間的職責(zé)關(guān)系,我認(rèn)為:事件發(fā)布應(yīng)該方法控制器中,而不應(yīng)該放在Service
中,Service
就等著被別人調(diào)用,不應(yīng)該與其他文件有耦合關(guān)系,否則改起來(lái)很難改。
$on
重構(gòu)指令,使用$on
監(jiān)聽(tīng)事件發(fā)布,執(zhí)行相應(yīng)的邏輯重新顯示右上角的未讀消息數(shù)。
angular.module('webappApp') .directive('yunzhiUnReadMessageCount', function(ToMessageService, superCache) { return { template: '<b ng-if="count">{{ count }}</b>', restrict: 'E', // 元素 link: function postLink(scope) { var self = this; self.init = function() { self.computeMessageCount(); }; // 計(jì)算未讀消息數(shù)量 self.computeMessageCount = function() { // 判斷緩存中是否存在未讀消息數(shù)量 if (angular.isUndefined(superCache.get('unReadMessageCount'))) { // 獲取當(dāng)前用戶(hù)的所有未讀收件消息 ToMessageService.pageReceiveUnReadMessageOfCurrentUser(undefined, function(data) { // 存入緩存 superCache.put('unReadMessageCount', data.totalElements); // 顯示 scope.count = superCache.get('unReadMessageCount'); }); } else { scope.count = superCache.get('unReadMessageCount'); } }; // 處理reloadMessageCount事件的處理邏輯 scope.$on('reloadMessageCount', function() { // 清除緩存 superCache.remove('unReadMessageCount'); // 計(jì)算未讀消息數(shù)量 self.computeMessageCount(); }); // 初始化 self.init(); } }; });
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Angular單元測(cè)試之事件觸發(fā)的實(shí)現(xiàn)
這篇文章主要介紹了Angular單元測(cè)試之事件觸發(fā)的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01AngularJs 延時(shí)器、計(jì)時(shí)器實(shí)例代碼
這篇文章主要介紹了AngularJs 延時(shí)器、計(jì)時(shí)器實(shí)例代碼,需要的朋友可以參考下2017-09-09Angular實(shí)現(xiàn)可刪除并計(jì)算總金額的購(gòu)物車(chē)功能示例
這篇文章主要介紹了Angular實(shí)現(xiàn)可刪除并計(jì)算總金額的購(gòu)物車(chē)功能,涉及AngularJS事件響應(yīng)、元素遍歷與數(shù)值運(yùn)算等相關(guān)操作技巧,需要的朋友可以參考下2017-12-12Angular入口組件(entry component)與聲明式組件的區(qū)別詳解
這篇文章主要給大家介紹了關(guān)于Angular入口組件(entry component)與聲明式組件的區(qū)別的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2018-04-04Angular 4.X開(kāi)發(fā)實(shí)踐中的踩坑小結(jié)
這篇文章主要給大家介紹了關(guān)于Angular 4.X開(kāi)發(fā)實(shí)踐中的一些踩坑經(jīng)驗(yàn),文中主要介紹的是使用ngIf或者ngSwitch出錯(cuò)以及多級(jí)依賴(lài)注入器的相關(guān)內(nèi)容,需要的朋友可以參考借鑒,下面來(lái)一起看看吧。2017-07-07Angular?服務(wù)器端渲染應(yīng)用常見(jiàn)的內(nèi)存泄漏問(wèn)題小結(jié)
這篇文章主要介紹了Angular?服務(wù)器端渲染應(yīng)用一個(gè)常見(jiàn)的內(nèi)存泄漏問(wèn)題,主要包括屏幕閃爍問(wèn)題,出現(xiàn)閃爍的原因,在于 Angular 不知道如何重用它在服務(wù)器上成功渲染的內(nèi)容,本文給大家介紹的非常詳細(xì),需要的朋友一起學(xué)習(xí)下吧2022-06-06AngularJS中取消對(duì)HTML片段轉(zhuǎn)義的方法例子
這篇文章主要介紹了AngularJS中取消對(duì)HTML片段轉(zhuǎn)義的方法例子,在一些需要顯示HTML的地方,就要取消AngularJS的轉(zhuǎn)義,本文就介紹了這種方法,需要的朋友可以參考下2015-01-01AngularJS 過(guò)濾器的簡(jiǎn)單實(shí)例
本文主要介紹AngularJS 過(guò)濾器,這里提供詳細(xì)了AngularJS 過(guò)濾器詳細(xì)資料,并提供簡(jiǎn)單實(shí)例,有需要的朋友可以參考下2016-07-07Angular動(dòng)畫(huà)實(shí)現(xiàn)的2種方式以及添加購(gòu)物車(chē)動(dòng)畫(huà)實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于Angular動(dòng)畫(huà)的2種方式以及添加購(gòu)物車(chē)動(dòng)畫(huà)的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-08-08