Event Listener und Watcher wieder entfernen

angularjs tipps | Sascha Brink • 11.03.2014 | 1 Minute

Problem

Du hast mit scope.$on einen Event Listener oder mit scope.$watch einen Watcher registriert. Du möchtest ihn nun wieder entfernen, aber hast keine Funktion dafür gefunden.

Lösung

Für die Lösung schauen wir in den Quellcode von AngularJS. Im Folgenden sehen wir die Implementierung der $on-Funktion:

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

Wie wir sehen können, gibt die $on-Funktion selbst wieder eine Funktion zurück. Wenn wir diese Funktion ausführen, können wir einen Event Listener wieder entfernen.

Hier ein Beispiel dafür:

var myEventOffFn = $scope.$on('onMyEvent', myListener);

// Listener entfernen
myEventOffFn();

Watcher können wir übrigens genauso entfernen:

var myWatchFn = $scope.$watch('myVariable', myWatcher);

// Watcher entfernen
myWatchFn();

🐛 Diesen Artikel auf GitHub verbessern

Inhaltsverzeichnis

Email Newsletter

Um alle Neuigkeiten zu erfahren, abonniere hier unseren Newsletter!

Newsletter abonnieren

Sascha Brink

Sascha betreut regelmäßig Angular-Projekte und unterstützt Firmen bei der Ausbildung ihrer Mitarbeiter. Im Jahr 2013 hat er die Platform AngularJS.DE gestartet um das Framework in Deutschland bekannter zu machen. Sascha gibt Angular- und JavaScript-Schulungen auf deutsch und englisch.

Github