suchen

Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung der $watch-Methode in Angular

Detaillierte Erläuterung der $watch-Methode in Angular

黄舟
黄舟Original
2017-09-25 10:03:371609Durchsuche

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)

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='张三';
    
    $scope.count=0;
    
    // 监听一个model 当一个model每次改变时 都会触发第2个函数
    $scope.$watch('name',function(newValue,oldValue){
 
        ++$scope.count;
 
        if($scope.count > 30){
            $scope.name = '已经大于30次了';
        }
    });
 
}


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>


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
    }

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)


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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wie Sie ein vollständiges Versprechen umsetzenNächster Artikel：Wie Sie ein vollständiges Versprechen umsetzen

In Verbindung stehende Artikel

Mehr sehen