如何取消订阅angularJS中的广播事件。如何删除通过$ on注册的功能

问题描述 投票:266回答:10

我已经使用$ on函数将我的监听器注册到$ broadcast事件

$scope.$on("onViewUpdated", this.callMe);

我想根据特定的业务规则取消注册此侦听器。但我的问题是,一旦注册,我无法取消注册。

AngularJS中是否有任何方法可以取消注册特定的侦听器?像$ on这样取消注册此事件的方法可能是$ off。所以我可以说基于业务逻辑

 $scope.$off("onViewUpdated", this.callMe);

当有人播放“onViewUpdated”事件时,此函数停止被调用。

谢谢

编辑:我想从另一个函数取消注册监听器。不是我注册它的功能。

angularjs
10个回答
466
投票

您需要存储返回的函数并将其调用以取消订阅该事件。

var deregisterListener = $scope.$on("onViewUpdated", callMe);
deregisterListener (); // this will deregister that listener

这可以在源代码:)中找到,至少在1.0.4中。我会发布完整的代码,因为它很短

/**
  * @param {string} name Event name to listen on.
  * @param {function(event)} listener Function to call when the event is emitted.
  * @returns {function()} Returns a deregistration function for this listener.
  */
$on: function(name, listener) {
    var namedListeners = this.$$listeners[name];
    if (!namedListeners) {
      this.$$listeners[name] = namedListeners = [];
    }
    namedListeners.push(listener);

    return function() {
      namedListeners[indexOf(namedListeners, listener)] = null;
    };
},

另外,请参阅the docs


0
投票

如果您需要多次打开和关闭监听器,可以使用boolean参数创建一个函数

function switchListen(_switch) {
    if (_switch) {
      $scope.$on("onViewUpdated", this.callMe);
    } else {
      $rootScope.$$listeners.onViewUpdated = [];
    }
}

57
投票

看看大多数回复,它们看起来过于复杂。 Angular内置了取消注册的机制。

使用deregistration function returned by $on

// Register and get a handle to the listener
var listener = $scope.$on('someMessage', function () {
    $log.log("Message received");
});

// Unregister
$scope.$on('$destroy', function () {
    $log.log("Unregistering listener");
    listener();
});

27
投票

这段代码适合我:

$rootScope.$$listeners.nameOfYourEvent=[];

10
投票

编辑:正确的方法是@LiviuT的答案!

您总是可以扩展Angular的范围,以允许您删除这样的侦听器:

//A little hack to add an $off() method to $scopes.
(function () {
  var injector = angular.injector(['ng']),
      rootScope = injector.get('$rootScope');
      rootScope.constructor.prototype.$off = function(eventName, fn) {
        if(this.$$listeners) {
          var eventArr = this.$$listeners[eventName];
          if(eventArr) {
            for(var i = 0; i < eventArr.length; i++) {
              if(eventArr[i] === fn) {
                eventArr.splice(i, 1);
              }
            }
          }
        }
      }
}());

以下是它的工作原理:

  function myEvent() {
    alert('test');
  }
  $scope.$on('test', myEvent);
  $scope.$broadcast('test');
  $scope.$off('test', myEvent);
  $scope.$broadcast('test');

And here's a plunker of it in action


7
投票

在调试代码之后,我创建了自己的函数,就像“blesh”的答案一样。所以这就是我所做的

MyModule = angular.module('FIT', [])
.run(function ($rootScope) {
        // Custom $off function to un-register the listener.
        $rootScope.$off = function (name, listener) {
            var namedListeners = this.$$listeners[name];
            if (namedListeners) {
                // Loop through the array of named listeners and remove them from the array.
                for (var i = 0; i < namedListeners.length; i++) {
                    if (namedListeners[i] === listener) {
                        return namedListeners.splice(i, 1);
                    }
                }
            }
        }
});

所以通过将我的函数附加到$ rootscope现在它可供我的所有控制器使用。

在我的代码中,我正在做

$scope.$off("onViewUpdated", callMe);

谢谢

编辑:AngularJS的方法是@LiviuT的回答!但是,如果要在另一个范围内取消注册侦听器,同时又希望远离创建局部变量以保留de-registeration函数的引用。这是一种可能的解决方案。


1
投票

@LiviuT的答案很棒,但似乎让许多人想知道如何从另一个$ scope或函数重新访问处理程序的拆卸函数,如果你想从它创建的地方以外的地方销毁它。 @РустемМусабеков的答案很有用,但不是很惯用。 (并且依赖于什么应该是私人实现细节,可能随时改变。)从那里,它变得更复杂......

我认为这里简单的答案就是在处理程序本身中简单地引用一个拆卸函数(在他的例子中为offCallMeFn),然后根据某些条件调用它;也许是你在$ broadcast或$ emit事件中包含的arg。因此,无论何时何地,处理者都可以随意拆除自己,随身携带自己毁灭的种子。像这样:

// Creation of our handler:
var tearDownFunc = $rootScope.$on('demo-event', function(event, booleanParam) {
    var selfDestruct = tearDownFunc;
    if (booleanParam === false) {
        console.log('This is the routine handler here. I can do your normal handling-type stuff.')
    }
    if (booleanParam === true) {
        console.log("5... 4... 3... 2... 1...")
        selfDestruct();
    }
});

// These two functions are purely for demonstration
window.trigger = function(booleanArg) {
    $scope.$emit('demo-event', booleanArg);
}
window.check = function() {
    // shows us where Angular is stashing our handlers, while they exist
    console.log($rootScope.$$listeners['demo-event'])
};

// Interactive Demo:

>> trigger(false);
// "This is the routine handler here. I can do your normal handling-type stuff."

>> check();
// [function] (So, there's a handler registered at this point.)  

>> trigger(true);
// "5... 4... 3... 2... 1..."

>> check();
// [null] (No more handler.)

>> trigger(false);
// undefined (He's dead, Jim.)

两个想法:

  1. 这是一次运行处理程序的一个很好的公式。只要放弃条件并在完成自杀任务后立即运行selfDestruct
  2. 我想知道原始范围是否会被正确销毁和垃圾收集,因为你带有对闭包变量的引用。你必须使用其中的一百万甚至让它成为记忆问题,但我很好奇。如果有人有任何见解,请分享。

1
投票

删除组件时注册一个钩子以取消订阅您的侦听器:

$scope.$on('$destroy', function () {
   delete $rootScope.$$listeners["youreventname"];
});  

0
投票

'$ on'本身返回取消注册的功能

 var unregister=  $rootScope.$on('$stateChangeStart',
            function(event, toState, toParams, fromState, fromParams, options) { 
                alert('state changing'); 
            });

您可以调用unregister()函数来取消注册该侦听器


0
投票

一种方法是在完成后立即销毁监听器。

var removeListener = $scope.$on('navBarRight-ready', function () {
        $rootScope.$broadcast('workerProfile-display', $scope.worker)
        removeListener(); //destroy the listener
    })
© www.soinside.com 2019 - 2024. All rights reserved.