Maison >interface Web >Tutoriel H5 >Explication détaillée de la méthode $watch d'Angular

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

一个新手original: 2017-10-06 10:40:072146parcourir

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

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

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
    }

Le code html est le suivant :

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

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：h5 avatar image rotation css3 contrôle précisément la position de chaque imageArticle suivant：h5 avatar image rotation css3 contrôle précisément la position de chaque image

Articles Liés

Voir plus