在AngularJS中只注册一次事件侦听器

Kit*_*tze 12 javascript angularjs

我正在从我的导航栏控制器向另一个控制器广播一个事件,但是如果我多次初始化控制器(当我正在通过应用程序前进和后退时),在我的$on事件上执行的函数会多次运行,因为它已经多次注册.

$rootScope.$on('submitBookingDialog', function(){
    submitBookingDialog();
});
Run Code Online (Sandbox Code Playgroud)

如何防止submitBookingDialog()不止一次发生?

我找到了解决方案,但我不知道它是否理想.

DRi*_*FTy 25

首先,你需要发送事件$rootScope吗?如果没有,那么你可以在上面注册你的事件处理程序$scope.每当您的控制器范围被销毁时,事件处理程序都将被销毁.然后,您将通过$scope.$emit$scope.$broadcast根据您的控制器层次结构发送事件.

话虽这么说,你需要做的就是销毁你的事件监听器是调用注册监听器时返回的注销函数:

var offSubmitBookingDialog = $rootScope.$on('submitBookingDialog', function(){
    submitBookingDialog();
});

$scope.$on('$destroy', function() {
    // Call the deregistration function when the scope is destroyed
    offSubmitBookingDialog();
});
Run Code Online (Sandbox Code Playgroud)


Kim*_*erg 14

这似乎是为我做的:

var removeListener = $rootScope.$on('submitBookingDialog', function(){
    submitBookingDialog();

    // Remove listener
    removeListener();
});
Run Code Online (Sandbox Code Playgroud)


Has*_*own 6

为了后代,我最终这样做:

.run(function($rootScope) {
    $rootScope.once = function(e, func) {
        var unhook = this.$on(e, function() {
            unhook();
            func.apply(this, arguments);
        });
    };
})
Run Code Online (Sandbox Code Playgroud)

因为我一直需要在几个地方这样做,所以最终变得更加干净。
现在,您可以在应用模块上调用once而不是$on

$rootScope.once('submitBookingDialog', function() {
    submitBookingDialog();
});
Run Code Online (Sandbox Code Playgroud)