Detaillierte Erläuterung der Lösung für das $watch-Invalidierungsproblem in AngularJS

Dieser Artikel stellt hauptsächlich die Lösung des $watch-Fehlerproblems von AngularJS vor. Interessierte Freunde können sich darauf beziehen.

Dieser Artikel stellt die Lösung für das $watch-Fehlerproblem von angleJS vor. Teilen Sie ihn übrigens mit allen und hinterlassen Sie eine Notiz für sich selbst

Die $watch-Methode kann uns in jedem Bereich helfen . Überwachen Sie die darin enthaltenen Variablen.

$watch Einzelne Variable

Bei gewöhnlichen Variablen wie Zahlen, Zeichenfolgen usw. können Sie die Änderungen der Variablen überwachen, indem Sie wie folgt direkt schreiben und ausführen die entsprechende Funktion.

$scope.count=1;
$scope.$watch('count',function(){
...
});

$mehrere Variablen beobachten

Um Änderungen in mehreren Variablen zu überwachen, können Sie dies tun, wenn Sie dieselbe Funktion ausführen Diese Variablen werden in Zeichenfolgen umgewandelt und zur Überwachung durch „+“-Zeichen getrennt

//当count或page变化时，都会执行这个匿名函数
$scope.count=1;
$scope.page=1;
$scope.$watch('count + page',function(){
...
});

$watch object or array

Ich habe festgestellt, dass bei Verwendung der beiden oben genannten Methoden zur Überwachung des Arrays die anonyme Funktion nicht ausgelöst wurde, selbst wenn sich der Inhalt des Arrays änderte. Später habe ich herausgefunden, dass die Watch-Funktion tatsächlich drei Variablen hat. Der erste Parameter ist das Objekt, das überwacht werden muss. Der zweite Parameter ist die Funktion, die aufgerufen werden muss, wenn sich das überwachte Objekt ändert , was standardmäßig falsch ist.

Wenn der dritte Parameter falsch ist, überwacht die Überwachungsfunktion tatsächlich die Adresse des Arrays, und Änderungen am Inhalt des Arrays wirken sich nicht auf Änderungen der Array-Adresse aus, sodass die Überwachungsfunktion fehlschlägt.

Die Lösung besteht darin, den dritten Parameter später als true hinzuzufügen (natürlich können Sie diese Listening-Funktion auch verwenden, um das Ergebnis als anonyme Funktion des Objekts oder Arrays in Form eines JSON zurückzugeben string.)

$scope.items=[
{a:1},
{a:2}
{a:3}];
$scope.$watch('items',function(){...},true);

Oder warten Sie auf eine anonyme Funktion, die das Objekt oder Array in Form einer JSON-Zeichenfolge zurückgibt

$scope.items=[
{a:1},
{a:2}
{a:3}];
$scope.$watch(function(){
  return JSON.stringify($scope.items);
},function(){...});

$beobachten Sie das Rückgabeergebnis der Funktion

Beim Schreiben von Code muss man manchmal überwachen, ob sich das von einer Funktion zurückgegebene Ergebnis ändert, deshalb habe ich $ überprüft Uhr überwacht die Funktion.

Methode 1: Das Überwachungsobjekt ist die Zeichenfolge „Funktionsname ()“, denken Sie daran, „()“ hinzuzufügen!

//未完成的任务个数
$scope.unDoneCount = function() {
  var count = 0;
  angular.forEach($scope.todoList, function(todo) {
    count += todo.done ? 0 : 1;
  });
  return count;
};
//单选影响全选部分
$scope.$watch('unDoneCount()', function(nv) {
  $scope.isDoneAll = nv ? false : true;
});

Methode 2 : Legen Sie es als anonyme Funktion im Überwachungsobjekt fest und geben Sie den Rückgabewert der zu überwachenden Funktion zurück (schmutzig ...)

$scope.$watch(function(){
  return $scope.unDoneCount();//不要忘了(),要执行的啊~
}, function(nv) {
  $scope.isDoneAll = nv ? false : true;
});

Abbrechen $watch

Der Leistungsverbrauch von Uhren scheint recht hoch zu sein. Denken Sie daher bei Uhren, die nicht mehr überwacht werden müssen, daran, sie regelmäßig abzubrechen.

Was das Abbrechen betrifft ... Ich habe es nach langer Suche gefunden

Tatsächlich ist das von jeder Überwachungsfunktion zurückgegebene Ergebnis deregisterWatch() Funktion dieser Uhr

//在chrome的控制台上，断点得到的$watch的返回值
function deregisterWatch() {
  arrayRemove(array, watcher);
  lastDirtyWatch = null;
}

Wenn Sie die Uhr also abbrechen möchten, speichern Sie einfach den Rückgabewert von $watch zu Beginn, wenn Sie die Uhr abbrechen möchten Pass auf, ruf es an.

var count=1;
var unbingWatch=$scope.$watch('todoList',function(){
  console.log('todoList change');
  count++;
  //相当于在todoList变化了4次之后，就调用unbingWatch()取消这个watch
  //在第5次todoList改变的时候,就不会输出todoList change了。
  if(count>4){
    unbingWatch();
  }
});

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Lösung für das $watch-Invalidierungsproblem in AngularJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!