Detaillierte Erläuterung der $watch-Methode in Angular-js-Tutorial-php.cn

Detaillierte Erläuterung der $watch-Methode in Angular

黄舟

Freigeben： 2017-09-25 10:03:37

Original

1555 Leute haben es durchsucht

Dirty Check wird in der $apply-Methode erwähnt. Wenn die Evel-Methode erfolgreich analysiert wird, löst die Digest-Methode die Watch-Methode aus.

(1) Einführung in $watch

Wenn der Digest ausgeführt wird und sich der von Watch beobachtete Wert von der letzten Ausführung unterscheidet, wird er ausgelöst.

Die Uhr in AngularJS ermöglicht die Aktualisierung der Seite im Takt des Modells.

Die $watch-Methode wird hauptsächlich zur manuellen Überwachung eines Objekts verwendet, aber ein Ereignis wird ausgelöst, wenn sich das Objekt ändert.

(2)watch-Methodenverwendung

$watch(watchFn,watchAction,deepWatch)

Nach dem Login kopieren

watchFn: Zeichenfolge eines Winkelausdrucks oder einer Winkelfunktion

watchAction(newValue,oldValue,scope): watchFn ändert sich. Aufruf

deepWatch: Optionaler boolescher Befehl, um zu überprüfen, ob sich jedes Attribut des überwachten Objekts geändert hat

$watch gibt eine Funktion zurück. Wenn Sie sich von dieser Überwachung abmelden möchten, können Sie die Funktion verwenden

(3) Beispiel

Im vorherigen Beispiel wird ein Ereignis ausgelöst, wenn sich die Namensform 30 Mal ändert.

Der Controller-Code lautet wie folgt:

var firstController = function ($scope){
    $scope.name=&#39;张三&#39;;
    
    $scope.count=0;
    
    // 监听一个model 当一个model每次改变时 都会触发第2个函数
    $scope.$watch(&#39;name&#39;,function(newValue,oldValue){
 
        ++$scope.count;
 
        if($scope.count > 30){
            $scope.name = &#39;已经大于30次了&#39;;
        }
    });
 
}

Nach dem Login kopieren

Der HTML-Code lautet wie folgt:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <div ng-app="">
 
        <div ng-controller="firstController">
            <input type="text" value="" ng-model="name"/>
 
            改变次数:{{count}}-{{name}}
        </div>
    </div>
    <script type="text/javascript" src="app/index.js"></script>
<script type="text/javascript" src="../../vendor/angular/angularjs.js"></script>
</body>
</html>

Nach dem Login kopieren

Der Betriebseffekt ist wie folgt:

Sie können ihn die ersten 30 Mal nach Belieben ändern:

Detaillierte Erläuterung der $watch-Methode in Angular

Bei 30-maliger Änderung , der Name ist auf „Bereits mehr als 30 Mal“ festgelegt:

Detaillierte Erläuterung der $watch-Methode in Angular

Dies ist die Rolle der Uhr. Die zweite Funktion wird jedes Mal ausgelöst, wenn sich das Modell ändert.

(4) Der dritte Parameter der Überwachung

Wenn die Überwachung ein Objekt oder Array ist, zum Beispiel:

 $scope.data = {
        name :&#39;李四&#39;,
        count:20
    }

Nach dem Login kopieren

Der Name und die Anzahl der Daten zu diesem Zeitpunkt Beides überwacht werden müssen, dann können Sie so schreiben:

 $scope.$watch(&#39;data&#39;,function(){
 
    },true)

Nach dem Login kopieren

Wenn Sie den dritten Parameter nicht hinzufügen, werden nur Daten überwacht, und das wird auch so sein wird nur ausgelöst, wenn sich die Datenreferenz ändert.

Wenn Sie also einige Referenzobjekte überwachen müssen, müssen Sie den dritten Parameter auf true setzen.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der $watch-Methode in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!