Comment se désinscrire d'un événement diffusé dans angularJS. Comment supprimer une fonction enregistrée via $ on

J'ai inscrit mon auditeur à un événement de diffusion $ à l'aide de la fonction $ on

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

et je souhaite désinscrire cet écouteur en fonction d'une règle métier particulière. Mais mon problème est qu'une fois enregistré, je ne peux plus le désinscrire.

Existe-t-il une méthode dans AngularJS pour désinscrire un auditeur particulier? Une méthode comme $ on qui désenregistre cet événement, peut être $ off. Donc, sur la base de la logique métier, je peux dire

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

et cette fonction cesse d'être appelée lorsque quelqu'un diffuse l'événement "onViewUpdated".

Merci

EDIT : Je veux désinscrire l'auditeur d'une autre fonction. Pas la fonction où je l'enregistre.

Vous devez stocker la fonction retournée et l'appeler pour vous désinscrire de l'événement.

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

Cela se trouve dans le code source :) au moins dans 1.0.4. Je vais juste poster le code complet car c'est court

/**
  * @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;
    };
},

Consultez également la documentation .

En regardant la plupart des réponses, elles semblent trop compliquées. Angular a intégré des mécanismes de désinscription.

Utilisez la fonction de désinscription renvoyée par$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();
});

Ce code fonctionne pour moi:

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

EDIT: La bonne façon de le faire est dans la réponse de @ LiviuT!

Vous pouvez toujours étendre la portée d'Angular pour vous permettre de supprimer de tels écouteurs comme ceci:

//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);
              }
            }
          }
        }
      }
}());

Et voici comment cela fonctionnerait:

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

Et voici un plongeur en action

Après avoir débogué le code, j'ai créé ma propre fonction, tout comme la réponse de "blesh". C'est donc ce que j'ai fait

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

donc en attachant ma fonction à $ rootscope maintenant elle est disponible pour tous mes contrôleurs.

et dans mon code je fais

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

Merci

EDIT: La manière AngularJS de le faire est dans la réponse de @ LiviuT! Mais si vous souhaitez désenregistrer l'écouteur dans une autre étendue et en même temps, ne pas créer de variables locales pour conserver les références de la fonction de désenregistrement. C'est une solution possible.

@ La réponse de LiviuT est impressionnante, mais semble laisser beaucoup de gens se demander comment accéder à nouveau à la fonction de suppression du gestionnaire à partir d'une autre portée ou fonction $, si vous souhaitez la détruire d'un endroit autre que celui où elle a été créée. La réponse de @ Рустем Мусабеков fonctionne très bien, mais n'est pas très idiomatique. (Et repose sur ce qui est censé être un détail d'implémentation privé, qui pourrait changer à tout moment.) Et à partir de là, cela devient juste plus compliqué ...

Je pense que la réponse facile ici est de simplement porter une référence à la fonction de démontage ( offCallMeFndans son exemple) dans le gestionnaire lui-même, puis de l'appeler en fonction d'une condition; peut-être un argument que vous incluez sur l'événement que vous diffusez ou émettez. Les manipulateurs peuvent ainsi se détruire, quand vous voulez, où vous voulez, emportant avec vous les graines de leur propre destruction. Ainsi:

// 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.)

Deux réflexions:

1. Il s'agit d'une excellente formule pour un gestionnaire à exécution unique. Il suffit de laisser tomber les conditionnels et de courir selfDestructdès qu'il a terminé sa mission suicide.
2. Je me demande si la portée d'origine sera jamais correctement détruite et récupérée, étant donné que vous portez des références à des variables fermées. Il faudrait en utiliser un million pour que ce soit un problème de mémoire, mais je suis curieux. Si quelqu'un a des idées, veuillez les partager.

Enregistrez un hook pour désinscrire vos écouteurs lorsque le composant est supprimé:

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

Dans le cas où vous devez activer et désactiver l'auditeur plusieurs fois, vous pouvez créer une fonction avec un booleanparamètre

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

'$ on' lui-même renvoie la fonction pour désinscrire

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

vous pouvez appeler la fonction unregister () pour désenregistrer cet écouteur

Une façon consiste simplement à détruire l'auditeur une fois que vous en avez terminé.

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