Explication détaillée de la méthode $watch en angulaire-js tutoriel-php.cn

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

黄舟

Libérer： 2017-09-25 10:03:37

original

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

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

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
    }

Copier après la connexion

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)

Copier après la connexion

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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