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

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

WBOY

Libérer： 2016-05-16 15:06:36

original

1334 Les gens l'ont consulté

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

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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.