À l'aide de portée.$regarder et la portée.$appliquer

Question

Je ne comprends pas comment utiliser scope.$watch et scope.$apply. La documentation officielle n'est pas utile.

Ce que je ne comprends pas spécifiquement:

• Sont-ils connectés à les DOM?
• Comment puis-je mettre à jour DOM modifications au modèle?
• Quel est le point de connexion entre eux?

J'ai essayé ce tutoriel, mais il faut de la compréhension de l' $watch et $apply pour acquis.

Que dois - $apply et $watch le faire, et comment puis-je les utiliser de façon appropriée?

Answer 1

Vous devez être au courant sur la façon Angulaire de travaux dans le but de le comprendre.

Digest cycle et $portée

D'abord et avant tout, Angulaire définit un concept d'une sorte de digest du cycle. Ce cycle peut être considéré comme une boucle, au cours de laquelle Angulaire vérifie si il y a des changements de toutes les variables, regardé par tous les $scopes. Donc, si vous avez $scope.myVar défini dans votre contrôleur et cette variable a été marqué pour être regardé, puis vous indiquez explicitement Angulaire de surveiller les changements de l' myVar dans chaque itération de la boucle.

D'un naturel suivi de la question serait: est tout attaché $scope d'être regardé? Heureusement, non. Si vous surveillez les changements de chaque objet dans votre $scope, puis rapidement digérer boucle prendrait des années pour évaluer et vous serait vite rencontrer des problèmes de performance. C'est pourquoi Angulaire de l'équipe nous a donné deux façons de déclarer certains $scope variable comme étant regardé (lire ci-dessous).

$montre permet d'écouter $à des changements de périmètre

Il y a deux façons de déclarer une $scope variable comme étant regardé.

1. En l'utilisant dans votre modèle par l'expression: <span>{{myVar}}</span>
2. En ajoutant manuellement via $watch service

Ad 1) C'est le scénario le plus commun et je suis sûr que vous avez vu avant, mais vous ne saviez pas que cela a créé une montre en arrière-plan. Oui, il avait! À l'aide Angulaire directives (comme ng-repeat) peuvent également créer implicite montres.

Ad 2) C'est la façon dont vous créez vos propres montres. $watch service vous permet d'exécuter du code lorsque la valeur attachée à l' $scope a changé. Il est rarement utilisé, mais il est parfois utile. Par exemple, si vous souhaitez exécuter du code à chaque fois 'mavar' des modifications, vous pouvez effectuer les opérations suivantes:

function MyController($scope) {

   $scope.myVar = 1;

   $scope.$watch('myVar', function() {
       alert('hey, myVar has changed!');
   });

   $scope.buttonClicked = function() {
      $scope.myVar = 2; // This will trigger $watch expression to kick in
   };

}

$s'appliquent permet d'intégrer les modifications apportées à la digérer cycle

Vous pouvez penser à de la $apply fonctionner comme un mécanisme d'intégration. Vous voyez, chaque fois que vous changez de certaines regardé variable attachée à l' $scope objet directement, Angulaire savez que le changement s'est produit. C'est parce que Angulaires savait déjà pour la surveillance de ces changements. Alors si cela se produit dans le code géré par le cadre, le recueil de cycle. Cependant, parfois, vous voulez changer un peu de valeur à l'extérieur de l'angle monde et de voir les modifications se propagent normalement. Tenez compte de ceci: vous avez un $scope.myVar de la valeur qui sera modifié dans un jQuery $.ajax() gestionnaire. Cela se fera à un certain moment dans l'avenir. Angulaire ne peut pas attendre pour que cela se produise, car il n'a pas été invité à attendre sur jQuery. Pour le résoudre, $apply a été introduit. Il vous permet de démarrer le cycle de la digestion de manière explicite. Toutefois, vous devez l'utiliser uniquement pour la migration de certaines données Angulaire (intégration avec d'autres frameworks), mais ne jamais utiliser cette méthode combinée avec la régulière Angulaire de code, comme Angulaire lèvera une erreur alors.

Comment tout cela est lié à DOM?

Eh bien, vous devriez vraiment suivre le tutoriel de nouveau, maintenant que vous savez tout cela. Le digest cycle assurez-vous que l'INTERFACE utilisateur et le code JS reste synchronisé, par l'évaluation de chaque observateur connectée à l' $scopes tant que rien ne change. Si plus de changements se produisent dans le recueil de la boucle, alors il est considéré comme terminé. Vous pouvez joindre des objets à l' $scope objet soit de manière explicite dans le Contrôleur, ou en les déclarant en {{expression}} formulaire directement dans la vue.

Espoir qui aide à clarifier certaines connaissances de base à propos de tout cela.

Lectures supplémentaires:

• http://teropa.info/blog/2013/11/03/make-your-own-angular-part-1-scopes-and-digest.html (article Génial!)

Answer 2

Dans Angulaire, nous mettons à jour nos modèles et nos points de vue et les modèles de mise à jour du DOM "automatiquement" (via intégrés ou personnalisés directives).

$s'appliquent et $watch, les deux étant à la Portée des méthodes, ne sont pas liés à la DOM.

Les Concepts de page (paragraphe "Runtime") a une très bonne explication de l' $digest boucle, $s'applique, le montant de evalAsync file d'attente et de la liste de surveillance. Voici l'image qui accompagne le texte:

Quel que soit le code a accès à un champ d'application – normalement, les contrôleurs de directives et de leurs fonctions de liaison et/ou de leurs contrôleurs) – peut mettre en place un "watchExpression" qui Angulaire permettra d'évaluer l'encontre de cette portée. Cette évaluation se fait quand Angulaire entre dans sa $digest de la boucle (en particulier, le "$liste de surveillance" de la boucle). Vous pouvez regarder à portée individuelle propriétés; vous pouvez définir une fonction pour regarder des deux propriétés de l'ensemble; vous pouvez regarder la longueur d'un tableau; etc.

Où les choses se passent "à l'intérieur Angulaire" – par exemple, vous entrez dans une zone de texte qui a Angulaires à deux sens de la liaison de données est activé (c'est à dire, utilise ng-model), un $http rappel des incendies, etc. – $s'appliquent a déjà été appelé, nous sommes donc à l'intérieur de la "AngularJS" rectangle dans la figure ci-dessus. Tous les watchExpressions sera évalué (éventuellement plusieurs fois jusqu'à pas d'autres changements sont détectés).

Où les choses se passent "à l'extérieur Angulaire" – par exemple, vous avez utilisé bind() dans une directive et alors que l'événement se déclenche, résultant dans votre callback qui est appelée, ou certains jQuery rappel enregistré feux – nous sommes encore dans le "Natif" de rectangle. Si la fonction de rappel du code modifie quelque chose que tout $regarder est regarder, appelez $s'appliquent pour entrer dans le AngularJS rectangle, provoquant l' $digest boucle à exécuter, et donc Angulaire remarquerez le changement et de sa magie.