$ watch einen Rückgabewert einer Funktion

Question

Ich bin neu in AngularJs und ich verwende angular 1.4. Die Frage ist: ich ein einfaches Gegen Objekt bin mit wie folgt definiert:

var myCounter = (function(){ 
        var count =0; 
        return { 
         "inc": function(){ 
          count++; 
         }, 
         "dec": function(){ 
          if(count>0){ 
           count--; 
          } 
         }, 
         "getCount": function(){ 
          return count; 
         } 
        }; 
       })(); 

Ich mag würde die Zählvariable privat halten und den Wert nur durch ‚getCount‘ Funktion lesen.

Immer wenn die Anzahl erhöht/verringert wird, muss ich eine Reihe von Operationen basierend auf dem aktualisierten Wert von "count" durchführen. Dazu möchte ich '$ watch' verwenden, um die Änderungen zu beobachten. Aber ich kann den Wert nur durch Aufruf der Funktion 'getCount()' erhalten.

Bitte schlagen Sie vor, wie ich eine '$ Uhr' in diesem Szenario schreibe. Wenn dies kein korrekter Ansatz ist, schlagen Sie bitte einen besseren vor.

Vielen Dank im Voraus!

Answer 1

das Format für $watch ist $watch(watchExpression, listenerFunction). In diesem Fall kann der WatchExpression eine Funktion sein, die ausgewertet werden soll. Daher können Sie die getCount-Funktion (nicht das Ergebnis der Funktion) an die $watch übergeben.

So

$scope.$watch(myCounter.getCount, function() {}) 

funktionieren wird, vorausgesetzt, dass myCounter an den Controller zugänglich ist die $watch in definiert ist.

Answer 2

$scope.$watch(myCounter.getCount, function(){ 
    //Do stuff 
}) 

Answer 3

Sie benötigen ein callback auszuführen, wenn count erhöht/verringert. Sie können callback an den Konstruktor, wie dies passieren:

var myCounter = (function(callback){ 
        var count =0; 
        return { 
         "inc": function(){ 
          callback(++count); 
         }, 
         "dec": function(){ 
          if(count>0){ 
           count--; 
          } 
          callback(count); 
         }, 
         "getCount": function(){ 
          return count; 
         } 
        }; 
       })(); 

oder Sie können die callback auf inc oder dec Ereignisse passieren:

var myCounter = (function(){ 
        var count =0; 
        return { 
         "inc": function(callback){ 
          callback(++count); 
         }, 
         "dec": function(){ 
          if(count>0){ 
           count--; 
          } 
          callback(count); 
         }, 
         "getCount": function(){ 
          return count; 
         } 
        }; 
       })(); 

Der Unterschied zwischen den beiden Ansätzen besteht darin, dass in der ersten Sie wird dasselbe in jedem aufsteigenden/absteigenden Ereignis tun und in dem zweiten definieren Sie das callback Verhalten, wann immer solch ein Ereignis auftritt.

Answer 4

Nizza article auf $ Uhr und viele mehr! Ich hoffe, das wird dich recht führen. In Ihrem Fall sollten Sie die Objekte im Geltungsbereich deklarieren, weil angular nur $ scope-Variablen überwacht, so dass Ihr Code wie folgt aussieht.

$scope.myCounter = (function(){ 
       var count =0; 
       return { 
        "inc": function(){ 
         count++; 
        }, 
        "dec": function(){ 
         if(count>0){ 
          count--; 
         } 
        }, 
        "getCount": function(){ 
         return count; 
        } 
       }; 
      })(); 

$scope.$watch('myCounter.getCount', function(newValue, oldValue) { 
    if(newValue != oldValue && newValue !=null){ 
     //call your function.. 
     } 
})