您好,登錄后才能下訂單哦!
AngularJS 事件發(fā)布機(jī)制的原理是什么,很多新手對(duì)此不是很清楚,為了幫助大家解決這個(gè)難題,下面小編將為大家詳細(xì)講解,有這方面需求的人可以來(lái)學(xué)習(xí)下,希望你能有所收獲。
未讀消息提醒
當(dāng)器具用戶或技術(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)前用戶的所有未讀收件消息 ToMessageService.pageReceiveUnReadMessageOfCurrentUser(undefined, function(data) { // 存入緩存 superCache.put('unReadMessageCount', data.totalElements); // 顯示文本信息 element.text(superCache.get('unReadMessageCount')); }); } else { // 顯示文本信息 element.text(superCache.get('unReadMessageCount')); } } }; });
功能實(shí)現(xiàn)
注銷時(shí)清除緩存
注銷時(shí)如果不清除緩存,下一個(gè)用戶登錄時(shí)用的就是上一用戶留下來(lái)的緩存,造成信息提示錯(cuò)誤。
閱讀時(shí)重新執(zhí)行指令
下圖就是該實(shí)現(xiàn)的難點(diǎn)。
該用戶有一條未讀消息,當(dāng)用戶點(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
類似,只不過(guò)這個(gè)是用來(lái)向上發(fā)布事件的。
$on(name, listener);
Listens on events of a given type.
監(jiān)聽(tīng)一個(gè)給定類型的事件。
實(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)前用戶的所有未讀收件消息 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(); } }; });
看完上述內(nèi)容是否對(duì)您有幫助呢?如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章,請(qǐng)關(guān)注億速云行業(yè)資訊頻道,感謝您對(duì)億速云的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。