Cet article vous présente principalement les informations pertinentes sur $apply et son utilisation optimisée dans Angularjs. L'article le présente en détail à travers un exemple de code. Les amis qui en ont besoin peuvent s'y référer ensemble
.Avant-propos
Pour moi, complètement novice en front-end, je connais encore peu de choses sur Javascript si je veux me lancer avec Angular JS. directement, la résistance que je rencontre est vraiment grande. Cependant, je crois que tant que nous travaillerons dur, même les conceptions anti-humaines ne poseront pas de gros problèmes.
Aujourd'hui, nous allons parler de la petite étoile $apply dans Angularjs. Lorsque nos données sont mises à jour, mais que la couche de visualisation ne répond pas, nous pouvons toujours entendre quelqu'un dire, utilisez apply. Ensuite, sans nous connaître, nous ajoutons $scope.$apply()
après le code d'affectation, et nous sommes alors agréablement surpris de le découvrir. Oh, vraiment mis à jour.
Cependant, parfois, le compilateur vous reviendra impitoyablement
Erreur : $digest déjà en cours
Alors, quelles sont les causes de ces phénomènes ? Que fait exactement $apply ? Écoute-moi venir lentement.
1. Le rôle de $apply
La fonction $apply() peut créer des expressions dans le contexte angulaire depuis l'extérieur du Cadre angulaire Exécution interne.
Ce qui précède est une phrase du tutoriel AngularJs faisant autorité. Qu'est-ce que ça veut dire?
Tout d'abord, vous devez être conscient que la modification du modèle sous js natif ou sous des frameworks tiers peut ne pas déclencher de mises à jour de vues, comme les plug-ins setTimeout et jquery. Pourquoi? Parce qu'ils sont hors du contexte d'Angularjs, Angularjs ne peut pas surveiller les modifications des données. Voir des exemples.
1.setTimeout
html:
<p>{{name}}</p>
js:
$scope.name="张三"; setTimeout(function(){ $scope.name = '李四'; //$scope.$apply() },500)
D'abord, le nom est égal à Zhang San. Après 500 ms, je l'ai attribué à Li Si, mais la page n'a pas changé, c'est toujours Zhang San.
Cependant, si nous lâchons $scope.$apply()
, ce sera normal que Zhang San soit devenu Li Si avec succès.
2. Plugins tiers
html :
<p>Date: <input type="text" id="datepicker"></p> <p> <header>所选日期</header> {{selectedDate}} </p>
js :
$scope.selectedDate = ''; $( function() { $( "#datepicker" ).datepicker({ onClose: function( selectedDate ) { $scope.selectedDate = selectedDate; // $scope.$apply(); } }); } );
Il s'agit du plug-in jquery datepicker Lorsque nous sélectionnons la date, la date suivante devrait apparaître, mais maintenant ce n'est pas le cas. Dans ce cas, vous devez compter sur $apply() pour mettre à jour la vue.
Dans les deux cas ci-dessus, parce qu'ils ne sont pas dans le contexte Angularjs, les modifications des données ne peuvent pas être surveillées. Et qu'a fait exactement $apply pour que les données soient mises à jour normalement ?
En fait, $apply équivaut à un déclencheur. Sa fonction est de déclencher la boucle digest pour mettre à jour la vue.
Digest est le cœur d'Angularjs, qui implémente la liaison de données magique. Tout événement déclenché déclenchera certainement le cycle de résumé. Par exemple, nos événements numériques ng, click et change, déclenchent en fait le cycle de résumé.
Donc, ce que nous avons fait, c'est en fait déclencher le cycle de digestion manuellement. Concernant le cycle digest, c'est une digression, je ne le présenterai pas trop ici. Les étudiants qui souhaitent en savoir plus peuvent lire des livres ou Baidu.
2. Meilleure utilisation de la boucle de digestion
Dans Angularjs, en plus de $apply peut déclencher une boucle de digestion, il existe d'autres méthodes, celle-ci Une boucle peut également être déclenchée. Et $apply est souvent le pire choix. Certaines meilleures options sont recommandées ci-dessous.
1.$digest
$scope.$digest()
est plus rapide que $apply car il ne met à jour que les valeurs de la portée actuelle et de la portée enfant, pour la portée parent L'heure du domaine est ignorée. Et $apply doit également évaluer la portée parent, ce qui consomme beaucoup de performances.
2.$timeout
Utilisez $timeout pour remplacer votre setTimeout $timeout est un service intégré d'Angularjs, qui est bien sûr plus adapté aux Angularjs. environnement. Cela déclenchera implicitement le cycle de résumé, retardera l'exécution et déclenchera le cycle de résumé l'instant suivant la fin du cycle de résumé précédent, de sorte que le
< mentionné ci-dessus ne se produira pas 🎜>.$digest already in progress
$timeout(function(){ $scope.name = '李四'; },500)
3.$evalAsync
Cette méthode devrait être la plus recommandée. S'il y a un cycle de résumé en cours d'exécution, l'opération qui a provoqué le cycle de résumé sera alors placée dans le cycle de résumé en cours pour exécution. Le $timeout consiste à attendre que le cycle de résumé en cours soit terminé avant de réexécuter le cycle de résumé. Ainsi, evalAsync s'exécute plus rapidement et offre de meilleures performances. Nous pouvons l'appeler comme $timeout, c'est-à-dire$scope.$evalAsync( function( $scope ) { console.log( "$evalAsync" ); } );
À propos de l'utilisation de base des instructions intégrées dans Angular4
Comment vider le cache du navigateur dans AngularJs
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!