Explication détaillée de la méthode $watch d'Angular-Tutoriel H5-php.cn

Explication détaillée de la méthode $watch d'Angular

一个新手

Libérer： 2017-10-06 10:40:07

original

2144 Les gens l'ont consulté

Dirty check est mentionné dans la méthode $apply.Tout d'abord, la méthode apply déclenchera la méthode evel lorsque la méthode evel sera analysée avec succès, la méthode digest sera déclenchée et la méthode digest déclenchera la méthode watch.

(1) Introduction à $watch

Lorsque digest est exécuté, si la valeur observée par watch est différente de la dernière exécution, elle sera déclenchée.

La montre à l'intérieur d'AngularJS permet à la page d'être mise à jour en temps avec le modèle.

La méthode $watch est principalement utilisée pour surveiller manuellement un objet, mais un événement est déclenché lorsque l'objet change.

(2)utilisation de la méthode watch

$watch(watchFn,watchAction,deepWatch)

watchFn : chaîne d'expression angulaire ou de fonction

watchAction (newValue , oldValue, scope) : watchFn sera appelé lorsqu'il change

deepWatch : commande booléenne facultative pour vérifier si chaque attribut de l'objet surveillé change

$watch renverra une fonction si vous le souhaitez. pour déconnecter cette montre, vous pouvez utiliser la fonction

(3) Exemple

Dans l'exemple précédent, lorsque la forme du nom change 30 fois, un événement est déclenché.

Le code du contrôleur est le suivant :

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;;
        }
    });
 
}

Copier après la connexion

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

Copier après la connexion

10 Explication détaillée de la méthode $watch dAngular

15 Explication détaillée de la méthode $watch dAngular

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

Copier après la connexion

Le code html est le suivant :

< table border="0">

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

Copier après la connexion

1
2
3

tbody>L'effet de l'opération est le suivant : Vous pouvez le modifier à volonté les 30 premières fois : Quand modifié 30 fois, le nom est fixé à 'déjà supérieur à 30 fois' : C'est le rôle de la montre A chaque fois que le modèle change, la deuxième fonction sera. déclenché. (4) Le troisième paramètre de watchLorsque la surveillance est un objet ou un tableau, par exemple :

À l'heure actuelle, le nom et le nombre de données doivent être surveillés, vous pouvez donc écrire comme ceci :

Si vous n'ajoutez pas le troisième paramètre, alors seules les données seront surveillées, et seulement lorsque la référence des données change. Il ne sera déclenché que quand. Ainsi, lorsque vous devez surveiller certains objets de référence, vous devez définir le troisième paramètre sur true.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!