suchen

Heim  >  Artikel  >  Web-Frontend  >  Detaillierte Erläuterung der $watch-Methode von Angular

Detaillierte Erläuterung der $watch-Methode von Angular

一个新手
一个新手Original
2017-10-06 10:40:072114Durchsuche

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:

1

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

 


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

2

3

4

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

 
<!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>

5

6

7

8

9

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

11

12

13

14

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

16

 


$scope.data = {
        name :&#39;李四&#39;,
        count:20
    }
Der HTML-Code lautet wie folgt :

1

2

3

4

1

2

3

4

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

5

6

7

1

2

3

8

9

10

11

12

13

14

15

16

17

18

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:

1

2

3

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

1

2

3
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!

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：h5 Avatar-Bilddrehung CSS3 steuert präzise die Position jedes BildesNächster Artikel：h5 Avatar-Bilddrehung CSS3 steuert präzise die Position jedes Bildes

In Verbindung stehende Artikel

Mehr sehen