AngularJS 事件發布你知道多少，現在這篇文章告訴你想要知道angularjs事件詳情

本文主要的介紹了關於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可以發布事件。

$broadcast(name, args);

Dispatches an event name downwards to all child scopes (and their children) notifying the registered $rootScope.Scope listeners.

向下分發一個事件給他的所有子Scope，通知已註冊的Scope# 。

$emit(name, args);

Dispatches an event name upwards through the scope hierarchy notifying the registered $rootScope.Scope listeners.

與$broadcast類似，只不過這個是用來向上發布事件的。

$on(name, listener);

Listens on events of a given type.

監聽一個給定類型的事件。

程式碼實作

$rootScope

考慮到這兩個控制器與指令之間Scope的關係，無論是向上或向下可能都接收不到。

這裡直接用$rootScope向下發布事件，保證所有Scope都能取得到該事件。免得去考慮目前Scope與目的Scope之間的關係。

// 广播发布reloadMessageCount事件，重新计算未读消息数量
$rootScope.$broadcast('reloadMessageCount');

因為考慮到各個層之間的職責關係，我認為：事件發布應該方法控制器中，而不應該放在Service中，Service就等著被別人調用，不應該與其他文件有耦合關係，否則改起來很難改。

$on

重構指令，使用$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中文網其他相關文章！