Angular js多次订阅并触发多个事件

Question

我正在为一个应用程序工作，我想将 Angular js 与第三方 js 库进行通信。为此，我使用了使用中介 js 的 pubsub 方法。但是由于这个，当我订阅任何事件时，它会订阅多次，因此当我发布事件时，它会触发多次。

我使用了以下代码：

angular.module('app')
   .service('mediator', function() {
     var mediator = window.mediator || new Mediator();
     return mediator;
 });

// Main controller begins here
  angular.module('app').controller('MainController', MainController);
  MainController.$inject = ['mediator'];

  function MainController(mediator){
    var vm = this;
    vm.title = "This is main controller."

    vm.sendMessage = function(){
      mediator.publish('something', { data: 'Some data' });  
    }


  }


  // First page controller begins here
   angular.module('app').controller('FirstController', FirstController);
  FirstController.$inject = ['mediator'];

  function FirstController(mediator){
    var vm = this;

    console.log('Subscribed events for first controller.');

    var counter = 0;
    mediator.subscribe('something', function(data){ 
      console.log('Fired event for '+ counter.toString());
      counter = counter + 1;
    });

  }

这是为了更好地解释的 plunker： Plunkr

要测试这个 plunker：

1. 运行 plunker。
2. 打开开发者控制台。
3. 点击首页
4. 点击触发事件
5. 点击第二页
6. 点击首页
7. 点击火灾事件

当您第二次导航到第一页时，它将再次订阅事件并触发两次。当您多次导航到第一页时，这将订阅多次。

如果我做错了什么，请告诉我。

Answer 1

您可以在控制器被销毁时取消订阅。

要使用中介器，首先需要保存订阅函数：

var sub = function(data){ 
  console.log('Fired event for '+ counter.toString());
  counter = counter + 1;
}
mediator.subscribe('something', sub);

然后您可以在控制器被移除时使用角度事件取消订阅通知：

$scope.$on("$destroy", function() {
    mediator.remove("something", sub);
});

无论何时使用此模式，都应考虑需要删除订阅的时刻，这不仅是出于重复原因，还可能导致内存泄漏。

别忘了你还需要注入 $scope （即使不将其用作模型的持有者，也可以将其用于注册事件侦听器）：

angular.module('app').controller('FirstController', FirstController);
FirstController.$inject = ['mediator', '$scope'];

Plunkr 示例：https://plnkr.co/edit/CgYLLSxGF2Fww5vBB7PB

希望对你有帮助。