Comprendre Angular & # x27; s $ appliquer () et $ digest ()

Vous cherchez une formation AngularJS en ligne de premier ordre? Découvrez Ultimate Angular par Todd Devise. Utilisez le code du code pour une remise de 25% et en charge du point de sitepoint!

Les fonctions

Angularjs $apply() et $digest() sont des éléments fondamentaux, mais parfois déroutants. Les maîtriser est la clé pour comprendre le fonctionnement intérieur d'Angularjs. Cet article clarifie leurs rôles et leurs applications pratiques dans le développement de tous les jours AngularJS.

Prise des clés:

• $apply() et $digest() sont cruciaux pour la liaison des données bidirectionnelle d'AngularJS, assurant des mises à jour transparentes entre la vue et le modèle de portée.
• $apply() initie un cycle $digest au niveau $rootScope, traversant toutes les lunettes d'enfants et exécutant des observateurs. AngularJS l'appelle automatiquement lorsque des changements de modèle se produisent dans son contexte.
• L'invocation manuelle de $apply() est nécessaire lorsque les modifications du modèle se produisent en dehors du contexte d'AngularJS (par exemple, en utilisant setTimeout() ou des auditeurs d'événements DOM). Cela signale AngularJS pour mettre à jour les observateurs et propager correctement les modifications.
• La boucle $digest itère plusieurs fois, vérifiant les changements du modèle de portée. Il se poursuit jusqu'à ce qu'aucune autre modification ne soit détectée ou qu'une limite d'itération maximale (10) soit atteinte.

plongée profonde dans $apply() et $digest():

La liaison des données bidirectionnelle d'AngularJS est une caractéristique puissante. Les modifications de la vue mettent automatiquement à jour le modèle de portée et vice-versa. Cette magie se produit parce qu'AngularJS établit des observateurs sur les modèles de portée. Ces observateurs, similaires aux observateurs personnalisés:

$scope.$watch('aModel', function(newValue, oldValue) {
  // Update the DOM with newValue
});

Exécutez une fonction d'écoute chaque fois que aModel change. La question cruciale est: comment AngularJS sait-il quand appeler ces fonctions de l'auditeur?

La réponse est le cycle $digest. Ce cycle déclenche les observateurs. Lorsqu'un observateur se déclenche, AngularJS évalue le modèle de portée; Si un changement est détecté, la fonction d'écoute correspondante s'exécute.

Le cycle $digest est initié par $scope.$digest(). Par exemple, si vous modifiez un modèle de portée au sein d'un gestionnaire ng-click, AngularJS appelle automatiquement $digest(). Cela commence le cycle, tirant tous les observateurs et mettant à jour la vue en conséquence. D'autres directives / services (par exemple, ng-model, $timeout) déclenchent également $digest cycles.

Cependant, AngularJS n'appelle pas directement $digest(). Au lieu de cela, il utilise $scope.$apply(), qui à son tour appelle $rootScope.$digest(). Cela garantit que le cycle $digest commence à la racine et se propage à travers les lunettes d'enfants. Lorsque vous utilisez ng-click avec une fonction, AngularJS enveloppe l'appel de fonction dans $scope.$apply().

$apply() se présente sous deux formes: l'une acceptant une fonction comme un argument (préféré), et une version sans argument qui démarre simplement un cycle $digest.

Manuel $apply() Invocation:

Quand le manuel $apply() est-il nécessaire? AngularJs ne explique que les modifications du modèle apportées à dans son contexte (c'est-à-dire le code enveloppé dans $apply()). Les directives intégrées le génèrent automatiquement. Mais, si vous modifiez un modèle en dehors du contexte d'AngularJS, vous devez appeler manuellement $apply() pour informer les angularjs du changement.

par exemple, l'utilisation de setTimeout() pour mettre à jour un modèle de portée nécessite un manuel $apply():

$scope.$watch('aModel', function(newValue, oldValue) {
  // Update the DOM with newValue
});

Sans $apply(), la vue ne mettrait pas à jour. Préférez $timeout pour cela, car il gère automatiquement $apply(). La version fonction-argument de $apply() est la meilleure, car elle utilise un bloc try...catch pour gérer les exceptions via $exceptionHandler.

$digest itérations de la boucle:

La boucle $digest s'exécute à plusieurs reprises, en vérifiant les modifications du modèle. Si une fonction d'écoute modifie un modèle, la boucle redémarre pour tenir compte de ces modifications. Cela se poursuit jusqu'à ce qu'aucune modification ne soit trouvée ou que le nombre d'itération maximal (10) soit atteint. Visez les fonctions d'écoute idempotent pour minimiser les itérations de boucle.

Conclusion:

La compréhension $apply() et $digest() est vitale pour le développement efficace des angulaires. N'oubliez pas d'appeler manuellement $apply() lors de la réalisation du modèle en dehors du contexte d'AngularJS. Utilisez $timeout chaque fois que possible pour éviter les appels manuels $apply().

(Section FAQ a été supprimée pour la concision. Les FAQ fournies étaient répétitives et largement couvertes dans le corps principal du texte réécrit.)

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!