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