2014-12-16 14 views
9

Angenommen, Sie möchten etwas tun, wenn sich eine Eigenschaft von $scope ändert. Und sagen Sie, dass diese Eigenschaft an ein input Feld gebunden ist. Was sind die Vor-/Nachteile der Verwendung von $watch im Vergleich zu ngChange?

html

<input ng-model="foo" ng-change="increment()"> 
<p>foo: {{foo}}</p> 

<!-- I want to do something when foo changes. 
    In this case keep track of the number of changes. --> 
<p>fooChangeCount: {{fooChangeCount}}</p> 

js

// Option 1: $watch 
$scope.$watch('foo', function() { 
    $scope.fooChangeCount++; 
}); 

// Option 2: ngChange 
$scope.fooChangeCount = 0; 
$scope.increment = function() { 
    $scope.fooChangeCount++; 
}; 

http://plnkr.co/edit/4xJWpU6AN9HIp0OSZjgm?p=preview

Ich verstehe, dass es Zeiten gibt, wenn Sie verwenden müssen $watch (wenn der Wert Sie suchen nach Uhr ist nicht an ein Eingabefeld gebunden). Und ich verstehe, dass es Zeiten gibt, in denen Sie ngChange verwenden müssen (wenn Sie etwas als Reaktion auf eine Änderung in einer Eingabe vornehmen möchten, aber nicht unbedingt als Reaktion auf eine Bereichseigenschaftsänderung).

In diesem Fall erreichen beide jedoch das gleiche.

Meine Gedanken:

  • ngChange scheint sauberer und leichter zu verstehen, was passiert.
  • $watch scheint es könnte etwas schneller sein, aber wahrscheinlich vernachlässigbar. Mit ngChange denke ich, dass Angular in der Kompilierphase einige zusätzliche Arbeit leisten müsste, um die Ereignis-Listener einzurichten, und vielleicht verringern zusätzliche Ereignis-Listener die Geschwindigkeit ein wenig. Unabhängig davon, ob Sie ngChange verwenden oder nicht, wird der Digest-Zyklus bei Änderungen ausgeführt, sodass Sie die Möglichkeit haben, auf etwas zu warten und eine Funktion als Reaktion auf Änderungen aufzurufen.

Antwort

11

Fazit - Sie können mit $ Uhr alles erreichen, was Sie mit ng-Änderung erreichen können, aber nicht umgekehrt.

Zwecke:

ngChange - zu einem HTML-Element binded

beobachten $ - Modellobjekte des Oszilloskops beobachtet (HTML-Objektmodelle enthalten)

Meine Faustregel gilt: - Wenn Sie ng-change verwenden können, verwenden Sie es, um Ihr Szenario abzustimmen, andernfalls verwenden Sie $ watch

Warum sollten Sie $ watch nicht verwenden?

  1. Es ist ineffizient - Hinzufügen von Komplexität zu Ihrem verdauen $
  2. Es ist schwer effektiv zu testen
  3. Es ist nicht sauber
0

$ watch fügt mehr Komplexität hinzu, macht das $ digest, wodurch es weniger effizient ist. In Ihrem Fall ngChange es ist eine saubere und einfache Lösung ...

Font: http://www.benlesh.com/2013/10/title.html

0

Sie haben es meist richtig. ng-change ist sehr DOM-spezifisch und zum Auswerten eines Ausdrucks, wenn das Änderungsereignis auf einem DOM-Element ausgelöst wird.

$watch ist jedoch ein untergeordnetes (und allgemeineres) Dienstprogramm, das Ihr Ansichtsmodell oder $scope überwacht. Daher wird Ihre Überwachungsfunktion jedes Mal ausgelöst, wenn der Benutzer eine Taste eingibt (im Beispiel einer Eingabe).

Zum einen hört man also auf DOM-Events, zum anderen beobachtet man seine Daten.