AngularJS - $rootScope.$on - 多重執行

Question

在我的$onInit()我選擇了傳播事件：

  $onInit() {
    this.$rootScope.$on('CANCELLED', (event) => {
      this.EventService.getEventsCurrentUser('own')
        .then((result) => {
          this.ownEvents = result
        })
      })
  }

我怎樣才能一次停止傳播？

Answer 1

您需要通過調用返回函數手動“取消注冊” $rootScope事件。 您可以使用this.$onDestroy在組件生命周期中做到這this.$onDestroy 。 每次執行$rootScope.$on()時，都會一次又一次地綁定$rootScope事件。 這就是為什么您的事件被多次調用的原因。

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function ($scope, $rootScope) {

  var registerScope = null;

  this.$onInit = function () {
    //register rootScope event
    registerScope = $rootScope.$on('CANCELLED', function(event) {
        console.log("fired");
    });
  }

  this.$onDestroy = function () {
    //unregister rootScope event by calling the return function
    registerScope();
  }
});

另請檢查此答案，這將有助於您了解$rootScope和$scope事件背后的邏輯：

• 如何使用組件生命周期
• $rootScope.$on 和 $scope.$on 的區別