如何防止Angular中$rootScope.$on被多次调用？

这个问题我之前开发AngularJS项目时也踩过坑！核心原因很明确：每次你的控制器/组件被实例化时，都会给$rootScope新增一个监听，但$rootScope不会自动清理这些旧监听——旧的监听没被销毁，新的又叠加上去，广播一次自然就会触发多次了。下面是几个实用的解决办法：

1. 手动销毁监听（最常用的方案） #

$rootScope.$on调用后会返回一个注销函数，你只需要在当前作用域销毁时调用这个函数，就能把对应的监听移除，避免残留“僵尸监听”。

举个具体的代码示例：

angular.module('yourApp').controller('YourController', function($rootScope, $scope) {
  // 保存监听返回的注销函数
  var unbindCloseListener = $rootScope.$on("closeviewMultiUserMainDetail", function(event) {
    // 你的业务逻辑代码
    console.log('处理关闭视图的逻辑');
  });

  // 当当前控制器的作用域销毁时（比如路由切换、弹窗关闭），注销监听
  $scope.$on('$destroy', function() {
    unbindCloseListener();
  });
});

这样每次控制器被销毁时，对应的监听就会被清理，不会留下重复绑定的问题。

2. 将监听放在只会执行一次的位置 #

如果这个事件的处理逻辑是全局唯一的，不需要跟着控制器实例化多次，那可以把监听放在Angular的run块里——run块在应用启动时只会执行一次，自然不会出现重复绑定的情况：

angular.module('yourApp').run(function($rootScope) {
  $rootScope.$on("closeviewMultiUserMainDetail", function(event) {
    // 全局统一的处理逻辑
  });
});

不过要注意，这种方式只适合通用的全局逻辑，如果你的监听和某个特定视图/组件强相关，还是用第一种方法更合适。

3. 排查重复实例化的场景 #

有时候问题出在控制器被意外多次实例化（比如同一个路由被重复加载、指令重复渲染），这时候除了清理监听，还要排查根源：比如检查路由配置是否有重复注册、指令的scope设置是否合理，避免不必要的重复实例化。

另外提个小建议：尽量减少$rootScope全局事件的使用，因为全局事件不容易追踪，还容易引发这类绑定问题。如果是组件之间的通信，优先考虑用服务或者组件的输入输出绑定，代码会更清晰可控。

内容的提问来源于stack exchange，提问作者A.R.SEIF