$rootScope.$on多次触发咨询：仅触发一次事件却多次执行回调

这个问题我碰到过不少次，核心原因其实是控制器被重复实例化了——每次你的控制器被创建时，都会执行$rootScope.$on('driver-loaded', ...)这行代码，相当于给同一个事件绑定了多份监听器。当$rootScope.$emit触发事件时，所有已绑定的监听器都会挨个执行，所以才会出现console.log('loaded')多次输出的情况。

另外提个小细节：你代码里触发的事件是driver-loader，但监听的是driver-loaded，如果这不是提问时的笔误，那监听器根本不会触发，所以先确保事件名称完全一致哦。

针对这个问题，有几个实用的解决办法，你可以根据自己的业务场景选择：

1. 控制器销毁时自动移除监听器 #

AngularJS的控制器所在作用域销毁时，会触发$destroy事件，我们可以利用这个时机清理掉之前绑定的监听器，避免重复叠加：

var watchDriverLoader = $rootScope.$on('driver-loaded', function(){ 
    console.log('loaded'); 
});

// 当控制器所在的作用域被销毁时，移除监听器
$scope.$on('$destroy', function() {
    watchDriverLoader(); // 调用$on返回的函数就能移除对应的监听器
});

这样每次控制器销毁时，对应的监听器也会被清理，下次控制器实例化时绑定的新监听器就不会和旧的冲突了。

2. 使用一次性监听器 #

如果你只需要监听一次这个事件，之后就不需要再响应了，可以直接用$rootScope.$once来绑定——它会在事件触发一次后自动移除监听器，不用手动管理：

$rootScope.$once('driver-loaded', function(){ 
    console.log('loaded'); 
});

这个方法最适合只需要一次响应的场景，代码也更简洁。

3. 排查控制器重复实例化的原因 #

有时候控制器重复实例化是因为代码结构的问题，比如：

• 路由切换时没有正确清理旧视图，导致控制器多次创建
• ng-controller指令被放在了ng-repeat这类会重复渲染的元素里
• 模态框、弹窗组件每次打开都会重新实例化控制器

你可以先排查下自己的代码，看看是不是这些场景导致的，从根源上解决重复实例化的问题。

内容的提问来源于stack exchange，提问作者LazioTibijczyk