angularjs • tipps | Sascha Brink • | 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();
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.
