AngularJS 事件發布機制的原理是什么，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

成都創新互聯是專業的科爾沁左翼網站建設公司，科爾沁左翼接單;提供網站設計制作、成都網站設計,網頁設計,網站設計,建網站,PHP網站建設等專業做網站服務;采用PHP框架,可快速的進行科爾沁左翼網站開發網頁制作和功能擴展;專業做搜索引擎喜愛的網站,專業的做網站團隊,希望更多企業前來合作!

未讀消息提醒

當器具用戶或技術機構對非強檢器具檢校申請發布新的意見時，需要對對方進行消息通知。

后臺很簡單，本文主要解決前臺遇到的問題。

歷史遺留

這是我的消息遺留下來的統計未讀消息的指令，用到了緩存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'));
        }
      }
    };
  });

功能實現

注銷時清除緩存

注銷時如果不清除緩存，下一個用戶登錄時用的就是上一用戶留下來的緩存，造成信息提示錯誤。

閱讀時重新執行指令

下圖就是該實現的難點。

該用戶有一條未讀消息，當用戶點擊閱讀這條消息時，將該消息的狀態設置為已讀，然后右上角的未讀條數同時修改。但是點擊這個事件是發生在控制器中，而消息又是一個額外的指令，兩者毫無聯系。

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.

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

實例說明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的輸出結果

child 
parent

代碼實現

$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 ng-if="count">{{ 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();
      }
    };
  });

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注創新互聯行業資訊頻道，感謝您對創新互聯的支持。

分享文章：AngularJS事件發布機制的原理是什么-創新互聯
分享鏈接：http://newbst.com/article14/doosde.html

成都網站建設公司_創新互聯，為您提供建站公司、網站策劃、企業建站、標簽優化、網站排名、外貿網站建設

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯