comment fonctionne la liaison et la digestion dans AngularJS ?

Question

Une chose qui distingue AngularJS des autres frameworks JavaScript-MVC est sa capacité à répercuter les valeurs liées de JavaScript dans le HTML à l'aide de bindings. Angular le fait "automatiquement" lorsque vous attribuez une valeur quelconque à la variable $scope.

Mais à quel point est-ce automatique ? Parfois, Angular ne détecte pas le changement et je dois donc appeler $scope.$apply() ou $scope.$digest() pour informer Angular de détecter le changement. Parfois, lorsque j'exécute l'une ou l'autre de ces méthodes, une erreur est lancée et il est indiqué qu'un digest est déjà en cours.

Puisque les liens (tout ce qui se trouve à l'intérieur des accolades {{ }} ou des attributs ng) sont renvoyés avec eval, cela signifie-t-il qu'Angular interroge constamment l'objet $scope pour rechercher des changements et effectue ensuite une évaluation pour transférer ces changements dans le DOM/HTML ? Ou bien AngularJS a-t-il, d'une manière ou d'une autre, compris l'utilisation de variables magiques qui déclenchent des événements lorsque la valeur d'une variable change ou est assignée ? Je n'ai jamais entendu dire que cela était entièrement pris en charge par tous les navigateurs, donc j'en doute.

Comment AngularJS conserve-t-il la trace de ses liaisons et de ses variables de portée ?

Answer 1

En plus de la section de la documentation trouvé par Mark Je pense que nous pouvons essayer d'énumérer toutes les sources possibles de changement.

1. Interaction de l'utilisateur avec les entrées HTML ( texte , nombre , url , email , radio , case à cocher ). AngularJS a inputDirective . texte ", " numéro ", " url " et " email ". gestionnaire d'audience pour les événements "input" ou "keydown". Gestionnaire d'écouteurs appelle scope.$apply . radio " et " checkbox " lient un gestionnaire similaire pour l'événement de clic.
2. Interaction de l'utilisateur avec l'élément sélectionné. AngularJS a selectDirective avec un comportement similaire sur l'événement "changement".
3. Changements périodiques utilisant service $timeout qui font aussi $rootScope.$apply() .
4. eventDirectives (ngClick, etc.) utilisent également la fonction scope.$apply .
5. $http utilise également $rootScope.$apply() .
6. Les changements en dehors du monde AngularJS doivent utiliser scope.$apply comme vous le savez.

Answer 2

Comme vous l'avez constaté, il n'effectue pas de sondage, mais utilise sa boucle d'exécution interne. C'est pourquoi vous devez utiliser $apply() ou $digest() pour mettre les choses en marche.

L'explication de Miško est assez complet, mais la partie manquante est qu'Angular essaie juste de faire en sorte que $scope retourne à un état interne clair chaque fois que quelque chose se passe dans son propre contexte. Cela peut prendre un certain temps pour rebondir entre les états du modèle, c'est pourquoi vous ne pouvez pas compter sur le fait que $watch() ne se déclenche qu'une seule fois et c'est aussi pourquoi vous devez être prudent avec la mise en place manuelle de relations entre les modèles ou vous vous retrouverez dans des rafraîchissements circulaires sans fin.