Come annullare l'iscrizione a un evento di trasmissione in angularJS. Come rimuovere la funzione registrata tramite $ on

Ho registrato il mio ascoltatore a un evento $ broadcast utilizzando la funzione $ on

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

e desidero annullare la registrazione di questo listener in base a una particolare regola aziendale. Ma il mio problema è che una volta registrato non sono in grado di cancellarlo.

Esiste un metodo in AngularJS per annullare la registrazione di un particolare ascoltatore? Un metodo come $ on che annulla la registrazione di questo evento potrebbe essere $ off. Quindi, in base alla logica aziendale, posso dire

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

e questa funzione smette di essere chiamata quando qualcuno trasmette l'evento "onViewUpdated".

Grazie

EDIT : voglio annullare la registrazione dell'ascoltatore da un'altra funzione. Non la funzione in cui lo registro.

È necessario memorizzare la funzione restituita e chiamarla per annullare l'iscrizione all'evento.

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

Questo si trova nel codice sorgente :) almeno nella 1.0.4. Pubblicherò semplicemente il codice completo poiché è breve

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

Inoltre, vedere la documentazione .

Guardando la maggior parte delle risposte, sembrano eccessivamente complicate. Angular ha meccanismi incorporati per annullare la registrazione.

Utilizza la funzione di annullamento$on della registrazione restituita da :

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

Questo codice funziona per me:

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

EDIT: Il modo corretto per farlo è nella risposta di @ LiviuT!

Puoi sempre estendere l'ambito di Angular per consentirti di rimuovere tali ascoltatori in questo modo:

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

Ed ecco come funzionerebbe:

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

Ed eccone una parte in azione

Dopo il debug del codice, ho creato la mia funzione proprio come la risposta di "blesh". Quindi questo è quello che ho fatto

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

quindi collegando la mia funzione a $ rootscope ora è disponibile per tutti i miei controller.

e nel mio codice sto facendo

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

Grazie

EDIT: Il modo AngularJS per farlo è nella risposta di @ LiviuT! Ma se vuoi annullare la registrazione dell'ascoltatore in un altro ambito e allo stesso tempo vuoi evitare di creare variabili locali per mantenere i riferimenti della funzione di annullamento della registrazione. Questa è una possibile soluzione.

La risposta di @ LiviuT è fantastica, ma sembra lasciare molte persone a chiedersi come riaccedere alla funzione di smontaggio del gestore da un altro $ scope o funzione, se si desidera distruggerla da un luogo diverso da dove è stata creata. La risposta di @ Рустем Мусабеков funziona benissimo, ma non è molto idiomatica. (E si basa su quello che dovrebbe essere un dettaglio di implementazione privato, che potrebbe cambiare in qualsiasi momento.) E da lì, diventa solo più complicato ...

Penso che la risposta facile qui sia semplicemente portare un riferimento alla funzione di abbattimento ( offCallMeFnnel suo esempio) nel gestore stesso, e poi chiamarlo in base a qualche condizione; forse un argomento che includi nell'evento che $ trasmetti o $ emetti. I gestori possono così abbattere se stessi, quando vuoi, dove vuoi, portando in giro i semi della loro stessa distruzione. Così:

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

Due pensieri:

1. Questa è un'ottima formula per un gestore run-once. Lascia cadere i condizionali e corri selfDestructnon appena ha completato la sua missione suicida.
2. Mi chiedo se l'ambito di origine verrà mai correttamente distrutto e raccolto in modo spazzatura, dato che stai portando riferimenti a variabili chiuse. Dovresti usarne un milione anche solo per avere un problema di memoria, ma sono curioso. Se qualcuno ha qualche intuizione, per favore condividi.

Registra un hook per annullare l'iscrizione ai tuoi listener quando il componente viene rimosso:

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

Nel caso in cui sia necessario attivare e disattivare più volte l'ascoltatore, è possibile creare una funzione con booleanparametro

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

'$ on' stesso restituisce la funzione per l'annullamento della registrazione

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

puoi chiamare la funzione unregister () per annullare la registrazione di quell'ascoltatore

Un modo è semplicemente distruggere l'ascoltatore una volta che hai finito.

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