Comment fonctionne la liaison et la digestion dans AngularJS?

Une chose qui distingue AngularJS des autres frameworks JavaScript-MVC est sa capacité à faire écho aux valeurs liées de JavaScript en HTML en utilisant des liaisons. Angular le fait “automatiquement” lorsque vous affectez une valeur à la variable $ scope.

Mais comment est-ce automatique? Parfois, Angular ne prend pas en compte le changement, alors je dois appeler $ scope. $ Apply () ou $ scope. $ Digest () pour indiquer à angular de prendre le changement. Parfois, lorsque je lance l’une de ces méthodes, cela génère une erreur et indique qu’un résumé est déjà en cours.

Puisque les liaisons (tout ce qui se trouve entre accolades {{}} ou atsortingbuts ng) sont répercutées sur eval, cela signifie-t-il qu’Angular interroge constamment l’object $ scope pour rechercher les modifications et effectuer une évaluation pour pousser ces modifications dans le DOM / HTML? Ou est-ce qu’AngularJS a en quelque sorte compris les variables magiques d’utilisation qui déclenchent des événements qui sont déclenchés lorsqu’une valeur de variable change ou est affectée? Je n’ai jamais entendu parler de la prise en charge complète par tous les navigateurs, alors j’en doute.

Comment AngularJS assure-t-il le suivi de ses liaisons et de ses variables de scope?

En plus de la section de documentation trouvée 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” , “numéro” , “url” , “email” , “radio” , “case à cocher” ). AngularJS a inputDirective . Les entrées ‘text’, ‘number’, ‘url’ et ’email’ lient le gestionnaire d’écoute pour les événements ‘input’ ou ‘keydown’. La scope des appels du gestionnaire d’écoute. ‘radio’ et ‘checkbox’ lient un gestionnaire similaire pour l’événement click.
  2. Interaction de l’utilisateur avec l’élément select. AngularJS a sélectionné Directive avec un comportement similaire lors d’un événement “changement”.
  3. Modifications périodiques à l’aide du service de délai d’expiration $ rootScope. $ Apply () .
  4. eventDirectives (ngClick, etc.) utilise également scope. $ apply .
  5. $ http utilise également $ rootScope. $ apply () .
  6. Les changements en dehors du monde d’AngularJS devraient utiliser la scope.

Comme vous l’avez découvert, il n’y a pas d’interrogation, mais en utilisant sa boucle d’exécution interne, c’est pourquoi vous devez utiliser $ apply () ou $ digest () pour lancer les choses.

L’explication de Miško est assez approfondie, mais le peu qui manque, c’est qu’Angular essaie simplement de faire en sorte que $ scope revienne à un état interne clair chaque fois que quelque chose se passe dans son propre contexte. Cela peut nécessiter des rebondissements entre les états du modèle, et c’est pourquoi vous ne pouvez pas compter sur le système de contrôle $ watch () une seule fois et sur la configuration manuelle des relations entre les modèles. rafraîchissements circulaires.