Event Listener und Watcher wieder entfernen

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

💡 Keine Lust zu lesen?

Nicht jeder lernt am besten aus Büchern und Artikeln. Lernen darf interaktiv sein und Spaß machen. Wir bieten dir auch Angular Intensiv-Schulungen an, damit du tiefer in die Thematik einsteigen kannst.

Mehr Informationen zur Angular-Schulung

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

💡 Hat dir das Tutorial geholfen?

Wir bieten auch Angular-Intensiv-Schulungen an, um dich möglichst effektiv in das Thema Angular zu begleiten. Im Kurs kannst Du die Fragen stellen, die Du nur schlecht googeln kannst, z.B. "Besserer Weg, um meine Applikation zu strukturieren?". Wir können sie Dir beantworten.

Jetzt weiter lernen

Watcher können wir übrigens genauso entfernen:

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

// Watcher entfernen
myWatchFn();