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

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

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

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

AngularJS中是否有任何方法可以取消注册特定的侦听器？诸如$ on之类的方法可以取消注册此事件，可能是$ off。因此，基于业务逻辑，我可以说

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

并且当有人广播“ onViewUpdated”事件时，该函数将停止调用。

谢谢

编辑：我想注销另一个功能的侦听器。不是我注册的功能。

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

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;
    };
},

另外，请参阅docs。

查看大多数答复，它们似乎过于复杂。Angular内置了注销机制。

使用以下命令返回$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();
});

该代码对我有用：

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

编辑：正确的方法是在@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');

这是一个实用的工具

调试代码后，我创建了自己的函数，就像“ 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的答案！但是，如果要在另一个作用域中注销侦听器，同时又要避免创建局部变量以保留注销功能的引用。这是一个可能的解决方案。

@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. 我想知道，如果您携带对闭包变量的引用，则原始范围是否会被正确销毁并进行垃圾回收。您甚至必须使用其中的一百万个内存问题，但是我很好奇。如果有人有见识，请分享。

注册一个挂钩，以在删除组件时取消订阅您的侦听器：

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

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

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

'$ on'本身返回注销功能

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

您可以调用unregister（）函数来注销该侦听器

一种方法是在完成侦听器后就将其销毁。

var removeListener = $scope.$on('navBarRight-ready', function () {
        $rootScope.$broadcast('workerProfile-display', $scope.worker)
        removeListener(); //destroy the listener
    })