本文主要的介紹了關於angularjs事件發布的詳情，你想要知道更多嗎？趕快來看看吧，現在我們一起來閱讀本篇文章吧
未讀訊息提醒：
當器具使用者或技術機構對非強檢器具檢校申請發布新的意見時，需要對對方進行訊息通知。後台很簡單，本文主要解決前台遇到的問題。
這是我的訊息遺留下來的統計未讀訊息的指令，用到了快取 superCache。
一眼看去應該可以發現這個if...else的問題，第一次請求，將資料放到快取裡，之後就一直從快取中取了，這肯定有問題啊！原來有1一條訊息，然後點選查看，然後這個指令仍然是從快取中取的數據，還顯示一條。
angular.module('webappApp')
.directive('yunzhiUnReadMessageCount', function(ToMessageService, superCache) {
return {
template: '',
restrict: 'E', // 元素
link: function postLink(scope, element) {
// 判断缓存中是否存在未读消息数量
if (typeof superCache.get('unReadMessageCount') === 'undefined') {
// 获取当前用户的所有未读收件消息
ToMessageService.pageReceiveUnReadMessageOfCurrentUser(undefined, function(data) {
// 存入缓存
superCache.put('unReadMessageCount', data.totalElements);
// 显示文本信息
element.text(superCache.get('unReadMessageCount'));
});
} else {
// 显示文本信息
element.text(superCache.get('unReadMessageCount'));
}
}
};
});登出時如果不清除緩存，下一個使用者登入時用的就是上一使用者留下來的緩存，造成訊息提示錯誤。
下圖就是該實作的困難點。
該用戶有一條未讀訊息，當用戶點擊閱讀這則訊息時，將該訊息的狀態設為已讀，然後右上角的未讀條數同時修改。但是點擊這個事件是發生在控制器中，而訊息又是一個額外的指令，兩者毫無關聯。 (想學更多就到PHP中文網angularjs參考手冊欄位學習)
AngularJS的精髓就是Scope，這是兩個Scope，頁面內容是我們的控制器Scope，右上角的訊息處是我們的未讀訊息指令Scope。
如若是簡單的父子Scope關係，我們可以從控制器傳參數到指令，指令watch這個參數，根據控制器對參數的變動讓指令做出響應。但是這兩個Scope毫無關係，我們該怎麼辦呢？
查閱了相關資料，AngularJS中Scope可以發布事件。
Dispatches an event name downwards to all child scopes (and their children) notifying the registered $rootScope.Scope listeners.
向下分發一個事件給他的所有子Scope，通知已註冊的Scope# 。
Dispatches an event name upwards through the scope hierarchy notifying the registered $rootScope.Scope listeners.
與$broadcast類似，只不過這個是用來向上發布事件的。
Listens on events of a given type.
監聽一個給定類型的事件。
考慮到這兩個控制器與指令之間Scope的關係，無論是向上或向下可能都接收不到。
這裡直接用$rootScope向下發布事件，保證所有Scope都能取得到該事件。免得去考慮目前Scope與目的Scope之間的關係。
// 广播发布reloadMessageCount事件，重新计算未读消息数量
$rootScope.$broadcast('reloadMessageCount');因為考慮到各個層之間的職責關係，我認為：事件發布應該方法控制器中，而不應該放在Service中，Service就等著被別人調用，不應該與其他文件有耦合關係，否則改起來很難改。
重構指令，使用$on監聽事件發布，執行對應的邏輯重新顯示右上角的未讀訊息數。
angular.module('webappApp')
.directive('yunzhiUnReadMessageCount', function(ToMessageService, superCache) {
return {
template: '<b>{{ count }}</b>',
restrict: 'E', // 元素
link: function postLink(scope) {
var self = this;
self.init = function() {
self.computeMessageCount();
};
// 计算未读消息数量
self.computeMessageCount = function() {
// 判断缓存中是否存在未读消息数量
if (angular.isUndefined(superCache.get('unReadMessageCount'))) {
// 获取当前用户的所有未读收件消息
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');
// 计算未读消息数量
self.computeMessageCount();
});
// 初始化
self.init();
}
};
});
以上就是本篇文章的全部內容了，還想看更多就到PHP中文網angularjs學習手冊欄位中學習更多關於angularjs的相關知識。有問題的可以在下方留言提問。
【小編推薦】
angularjs濾鏡你會使用嗎？我們來看angularjs過濾器的詳細解釋
angularjs的表達式怎麼用？ angularjs的表達式的使用實例
以上是AngularJS 事件發布你知道多少，現在這篇文章告訴你想要知道angularjs事件詳情的詳細內容。更多資訊請關注PHP中文網其他相關文章！
