Maison > Article > interface Web > Différences entre $watch(), $digest() et $apply() dans AngularJS_AngularJS

Différences entre $watch(), $digest() et $apply() dans AngularJS_AngularJS

WBOYoriginal: 2016-05-16 15:06:361298parcourir

$watch(), $digest() et $apply() dans AngularJS $scope sont les fonctions principales d'AngularJS Vous devez comprendre ces fonctions pour apprendre AngularJS.

Lors de la liaison de variables dans $scope pour afficher, AngularJS crée automatiquement une « Watch » en interne. "Watch" est utilisé pour surveiller les modifications des variables dans la portée AngularJS. Une « Watch » peut être créée en appelant la méthode $scope.$watch().

La fonction $scope.$digest() parcourra toutes les montres et détectera si les variables du $scope qu'elle écoute ont changé. Si la variable change, la fonction d'écoute correspondant à la variable sera appelée. La fonction d'écoute peut effectuer de nombreuses opérations, comme laisser le texte HTML afficher la dernière valeur de variable. On peut voir que $scope.$digest peut déclencher des mises à jour de liaison de données.

Dans la plupart des cas, AngualrJS appellera automatiquement les fonctions $scope.$watch() et $scope.$digest(), mais dans certains cas, nous devons les appeler manuellement, il est donc nécessaire de comprendre comment elles fonctionnent fonctionnement.

$scope.$apply() Cette fonction exécutera d'abord du code puis appellera $scope.$digest(). Toutes les montres seront testées une fois et les fonctions d'écoute correspondantes seront exécutées. $scope.$apply() est utile lors de l'intégration d'AngularJS avec un autre code JavaScript.

Ensuite, nous expliquerons $watch(), $digest() et $apply() en détail.

$watch()
$watch(watchExpression, auditeur, [objectEquality])

watchExpression : objet de surveillance, qui peut être une chaîne ou une fonction (portée){}

écouteur : fonction de rappel (newVal, oldVal, scope){}

exécutée lorsque l'objet d'écoute change

objectEquality : s'il faut surveiller en profondeur. S'il est défini sur true, il indique à Angular de vérifier chaque changement de propriété dans l'objet surveillé. Vous devez l'utiliser si vous souhaitez surveiller des éléments individuels d'un tableau ou une propriété d'un objet plutôt qu'une valeur simple. (Par défaut : faux)

$digest()
Détectez toutes les surveillances dans la portée et les sous-portées actuelles, car la fonction d'écoute modifiera le modèle (variables dans la portée) pendant l'exécution, et $digest() continuera à être appelé jusqu'à ce que le modèle ne change plus. Lorsqu'il est appelé plus de 10 fois, $digest() lèvera une exception "Limite maximale d'itération dépassée" pour empêcher le programme d'entrer dans une boucle infinie.

$apply()
$appliquer([exp])

exp : chaîne ou fonction (portée){}

Le diagramme de pseudocode du cycle de vie $apply() est le suivant

function $apply(expr) {
 try {
  return $eval(expr);
 } catch (e) {
  $exceptionHandler(e);
 } finally {
  $root.$digest();
 }
}

Exemple
Ci-dessous, nous utilisons un exemple pour illustrer $watch, $digest et $apply.

<script>
var module = angular.module("myapp", []);
var myController1 = module.controller("myController", function($scope) {
  $scope.data = { time : new Date() };
  $scope.updateTime = function() {
    $scope.data.time = new Date();
  }
   
  document.getElementById("updateTimeButton")
      .addEventListener('click', function() {
    console.log("update time clicked");
    $scope.data.time = new Date();
  });
});
</script>
<body ng-app="myapp">
<div ng-controller="myController">
  {{data.time}}
 
  <br/>
  <button ng-click="updateTime()">update time - ng-click</button>
  <button id="updateTimeButton" >update time</button>
</div>
</body>

Ce code liera $scope.data.time au HTML pour l'affichage. En même temps, cette liaison créera automatiquement une surveillance pour surveiller les modifications dans $scope.date.time. De plus, il y a 2 boutons ici. Le premier bouton appelle la méthode $scope.updateTime via la directive ng-click. Ensuite, AngularJS exécutera automatiquement $scope.$digest() pour afficher la dernière heure en HTML. Le deuxième bouton ajoute un événement de clic via du code javascript pour mettre à jour l'heure dans le HTML. Mais le deuxième bouton ne fonctionne pas. La solution est d'appeler manuellement la méthode $scope.$digest() à la fin de l'événement click, comme suit :

document.getElementById("updateTimeButton")
    .addEventListener('click', function() {
  console.log("update time clicked");
  $scope.data.time = new Date();
  $scope.$digest();
});

Une autre solution consiste à appeler $scope.$apply(), comme suit :

document.getElementById("updateTimeButton")
    .addEventListener('click', function() {
  $scope.$apply(function(){
      console.log("update time clicked");
      $scope.data.time = new Date();
    }
  );
});

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.

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：Pure js+html et pure css+html créent des compétences accordéon effect_javascriptArticle suivant：Pure js+html et pure css+html créent des compétences accordéon effect_javascript

Articles Liés

Voir plus