Maison > Article > interface Web > Explication détaillée de la méthode $watch en angulaire

Explication détaillée de la méthode $watch en angulaire

黄舟original: 2017-09-25 10:03:371577parcourir

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 change appelé

deepWatch : Commande booléenne facultative pour vérifier si chaque attribut de l'objet surveillé a changé

$watch renverra une fonction Si vous souhaitez vous déconnecter de 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.name=&#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;;
        }
    });
 
}

Le code html est le suivant :

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

L'effet de l'opération est le suivant :

Vous pouvez le modifier à volonté les 30 premières fois :

Explication détaillée de la méthode $watch en angulaire

Lorsqu'il est modifié 30 fois , le nom est fixé à 'Déjà plus de 30 fois' :

Explication détaillée de la méthode $watch en angulaire

C'est le rôle de la montre À chaque changement de modèle, la deuxième fonction se déclenchera.

(4) Le troisième paramètre de la montre

Lorsque la surveillance est un objet ou un tableau, par exemple :

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

Le nom et le nombre de données à ce moment-là. doivent être surveillés, alors vous pouvez écrire comme ceci :

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

Si vous n'ajoutez pas le troisième paramètre, alors seules les données seront surveillées, et elles le seront ne sera déclenché que lorsque la référence des données change.

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：Comment mettre en œuvre une promesse complèteArticle suivant：Comment mettre en œuvre une promesse complète

Articles Liés

Voir plus