Detaillierte Erläuterung der $watch-Methode von Angular-H5-Tutorial-php.cn

Detaillierte Erläuterung der $watch-Methode von Angular

一个新手

Freigeben： 2017-10-06 10:40:07

Original

2108 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)

watchFn: Zeichenfolge eines Winkelausdrucks oder einer Winkelfunktion

watchAction (newValue , oldValue, Scope): watchFn wird aufgerufen, wenn es sich ändert

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

$watch gibt eine Funktion zurück, wenn Sie möchten Um diese Uhr abzumelden, können Sie die Funktion

(3) Beispiel

verwenden. 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.n
ame=&#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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <p ng-app="">
 
        <p ng-controller="firstController">
            <input type="text" value="" ng-model="name"/>
 
            改变次数:{{count}}-{{name}}
        </p>
    </p>
    <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

10 Detaillierte Erläuterung der $watch-Methode von Angular

15 Detaillierte Erläuterung der $watch-Methode von Angular

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

Nach dem Login kopieren

Der HTML-Code lautet wie folgt :

< table border="0">

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

Nach dem Login kopieren

1
2
3

tbody>Der Operationseffekt ist wie folgt: Sie können ihn die ersten 30 Mal nach Belieben ändern: Wann 30 Mal geändert, wird der Name auf „bereits mehr als 30 Mal“ festgelegt: Dies ist die Rolle der Uhr. Jedes Mal, wenn sich das Modell ändert, wird die zweite Funktion übernommen ausgelöst. (4) Der dritte Parameter von watchWenn die Überwachung ein Objekt oder Array ist, zum Beispiel:

Zu diesem Zeitpunkt müssen sowohl Name als auch Anzahl der Daten überwacht werden, damit Sie so schreiben können :

Wenn Sie den dritten Parameter nicht hinzufügen, werden nur Daten überwacht. und nur, wenn sich die Datenreferenz ändert. Es wird nur ausgelöst, wenn. 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 von Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!