AngularJS : Éviter les erreurs de $digest déjà en cours lors de l'appel de $scope.$appliquer()

Je suis la recherche que j'ai besoin de mettre à jour ma page à ma portée manuellement de plus en plus et depuis la construction d'une application angulaire.

Le seul moyen que je connaisse pour ce faire est d'appeler $apply() de la portée de mes contrôleurs et des directives. Le problème, c'est qu'il garde de lancer une erreur de la console qui lit :

Erreur: $digest déjà en cours

Personne ne sait comment faire pour éviter cette erreur ou de réaliser la même chose mais d'une manière différente?

C'est vraiment frustrant chose que nous avons besoin d'utiliser $s'appliquent de plus en plus.
J'obtiens cette erreur ainsi, même si je suis appelant $s'appliquent dans un rappel. Je suis à l'aide d'un tiers de la bibliothèque pour accéder à des données sur leurs serveurs, donc je ne peux pas profiter de $http, je ne veux depuis que j'aurais à réécrire leur bibliothèque à utiliser $http.
utilisation $timeout()
utiliser $timeout(fn) + 1, Il peut résoudre le problème, !$la portée.$$la phase n'est pas la meilleure solution.
Seulement enrouler code/appel de la portée.$s'appliquent à partir de dans délais d'attente (pas de $timeout) fonctions AJAX (pas $http) et des événements (pas ng-*). S'assurer, si vous appelez à partir de l'intérieur d'une fonction (qui est appelé via le timeout/ajax/événements), qu'il n'est pas aussi en cours d'exécution sur la charge initialement.
J'obtiens cette erreur dans un endroit où je ne suis même pas appeler $s'appliquent. Je vais appeler element[0].focus();
Aussi, essayez d'utiliser $digest si vous le pouvez, car il ne fonctionne que dans le champ d'application et non sur la totalité de l'app. Pour des vitesses de souci! 🙂
angularjs et $s'appliquent

InformationsquelleAutor Lightbulb1 | 2012-10-04

657

Ne pas utiliser ce modèle - Cela finira par causer plus d'erreurs qu'elle n'en résout. Même si vous pensez qu'il fixe quelque chose, il n'a pas.

Vous pouvez vérifier si un $digest est déjà en cours en cochant $scope.$$phase.
```
if(!$scope.$$phase) {
  //$digest or $apply
}
```
$scope.$$phase sera de retour "$digest" ou "$apply" si un $digest ou $apply est en cours. Je crois que la différence entre ces états est que $digest traitera les montres de la portée actuelle et de ses enfants, et $apply traitera les observateurs de toutes les portées.

À @dnc253 point, si vous vous trouvez en appelant $digest ou $apply fréquemment, vous pouvez peut-être faire le mal. Je trouve en général que j'ai besoin de digérer quand j'ai besoin de mettre à jour le champ d'application de l'état en tant que résultat d'un DOM événement de tir hors de la portée Angulaire. Par exemple, lorsqu'un twitter bootstrap modal devient cachée. Parfois, les DOM événement se déclenche lorsqu'une $digest est en cours, parfois pas. C'est pourquoi j'utilise cette case.

J'aimerais savoir une meilleure façon, si quelqu'un connaît un.

De commentaires:
par @anddoutoi

angular.js Anti Motifs
1. Ne pas faire if (!$scope.$$phase) $scope.$apply(), cela signifie que votre $scope.$apply() n'est pas assez haut dans la pile d'appel.
- Merci! J'ai sauvé ma peau. J'ai été la gestion des événements de jQuery qui ont été tirées à partir des éléments dans une liste qui avait un filtre sur elle. J'ai eu le message d'erreur quand j'ai édité le contenu de l'un des éléments dans la liste. Été de me gratter BEAUCOUP sur cette question et avait été à la recherche spécifiquement pour un moyen de détecter si un $digest est en cours. Les docs sont inutiles pour ce genre de chose.
- Me semble que $digest / $s'appliquent doivent le faire par défaut
- Notez que dans certains cas, je vérifie, mais la portée ET l'étendue racine. J'ai reçu une valeur de $$de phase sur la racine mais pas sur ma portée. Pense qu'il a quelque chose à voir avec une directive isolé de portée, mais..
- "Arrêter de faire if (!$scope.$$phase) $scope.$apply()", github.com/angular/angular.js/wiki/Anti-Patterns
- J'obtiens cette erreur sans même l'appel de $scope.$appliquer() ou $scope.$digest() manuellement. C'est juste passe defaultly.
- D'accord; vous êtes le lien en fait assez évident que ce n'est pas la solution; cependant, je ne suis pas certain de ce que l'on entend par "vous n'êtes pas assez haut dans la pile d'appel". Savez-vous ce que cela signifie?
- voir la réponse par aaronfrost. La bonne façon est d'utiliser reporter pour déclencher l'empreinte dans le prochain cycle. Sinon, l'événement sera perdu et pas de mise à la portée de tous.
- voir aussi stackoverflow.com/questions/22346990/... pour voir pourquoi c'est un anti-modèle
- L'Information de la valeur de votre lien est de 0. Sans explication de pourquoi et comment faut-programmeur éviter les "anti-modèles", c'est juste inutile.
- -1 Voir la réponse par floribon. Pas seulement !$la portée.$$la phase n'est pas le droit de check - [$$ variables sont privés](stackoverflow.com/a/19338518/3116322), mais AUSSI il n'y a pas besoin de le vérifier lors d'un DOM événement est déclenché à l'extérieur du angulaire.
- à propos de la "pas assez haut dans la pile d'appel": je pense que cela signifie que si vous ne pouvez pas dire si oui ou non vous avez besoin d' $s'appliquent, vous pouvez déplacer le $s'appliquent code à un endroit où la fonction est appelée, et il va être de plus en plus évidents. I. e., vous avez deux chemins différents pour arriver à la même section de code, mais un seul d'entre eux a besoin de l' $s'appliquent appel. Si cela se produit, il suffit d'appeler la fonction avec $s'appliquent au lieu d'essayer de le comprendre, à plus tard! Espérons que cela aide.
- ouais c'est une approche commune. Malheureusement, il est un répugnant, mais il semble que, souvent, la seule solution valable. Que, ou il me fait sentir que je ne comprends vraiment pas Angulaire. Il devrait vraiment être une meilleure explication/matériau autour de cette question, car est tellement fondamentale pour obtenir des applications de fonctionner 🙁
- merci de modifier votre réponse afin que la "mise à jour" réponse à la première ligne, puis la "mauvaise" réponse, parce que les gens prennent généralement la première solution qu'ils voient
- Ne jamais utiliser le privé $$ méthodes
- Les conseils de dire "plus jamais cela" devrait être changé en "plus jamais le faire, sauf si c'est littéralement la seule chose qui fonctionne." Je suis actuellement en train de travailler avec CKEditor, et que je dois appeler $s'appliquent sur le champ d'application pour appliquer les modifications dans l'éditeur du gestionnaire d', et je ne suis jamais certain si un dossier est actuellement en train de se passer ou pas. Donc la vérification ce est exactement ce qui va résoudre le problème.
- Bien sûr, jusqu'à ce qu'elle se brise sur une future mise à jour de framework. Ne evalAsync pas faire ce que vous voulez?
- davidburgosonline.com/dev/2014/... des détails sur cette erreur
- Depuis cette réponse va à l'encontre de meilleur-pratique comme indiqué dans @betaorbust réponse, et puisque l'auteur de cette réponse commence par dire sa proposition est de ne pas être suivie, cette réponse devrait être supprimé.
- Quand ils disent "n'est pas assez haut dans la pile d'appel" ils sont ce qui suggère que la fonction actuelle ou l'une des fonctions d'appel, il doit être appelé par au moins 2 autres fonctions, dont certaines sont à l'intérieur de l'angle de digérer cycle et certains qui ne le sont pas. Il est préférable d'appeler $scope.$s'appliquent à l'appel de fonctions qui ne sont pas dans le recueil de cycle (sans nécessiter aucune sorte de vérifier).
- Je dirais qu'il n'est pas toujours aussi simple que cela "ne pas être assez haut dans la pile d'appel" si par exemple vous êtes en l'appelant dans un rappel de la 3ème partie du code que généralement, est de retour après un événement est déclenché, mais parfois renvoie immédiatement à cause de problèmes (qui ne peut pas être prévu) puis, ce problème est difficile à résoudre.
InformationsquelleAutor Lee
658

À partir d'une récente discussion avec l'angle de gars à ce sujet: Pour l'épreuve de l'avenir raisons, vous ne devez pas utiliser $$phase

Lorsqu'il est pressé pour le "droit" de le faire, la réponse est actuellement
```
$timeout(function() {
  //anything you want can go here and will safely be run on the next digest.
})
```
J'ai récemment rencontré ce lors de l'écriture angulaire des services à envelopper les facebook, google et twitter Api qui, à des degrés divers, sont des rappels remis.

Voici un exemple dans un service. (Par souci de concision, le reste du service -- que définir des variables, injecté $timeout etc. -- a été laissé.)
```
window.gapi.client.load('oauth2', 'v2', function() {
    var request = window.gapi.client.oauth2.userinfo.get();
    request.execute(function(response) {
        //This happens outside of angular land, so wrap it in a timeout 
        //with an implied apply and blammo, we're in action.
        $timeout(function() {
            if(typeof(response['error']) !== 'undefined'){
                //If the google api sent us an error, reject the promise.
                deferred.reject(response);
            }else{
                //Resolve the promise with the whole response if ok.
                deferred.resolve(response);
            }
        });
    });
});
```
Noter que l'argument des délais pour $timeout est optionnel et sera par défaut la valeur 0 si la gauche unset ($timeout appels $navigateur.reporter qui par défaut à 0 si le retard n'est pas défini)

Un peu de non-intuitif, mais c'est la réponse de la part des gars de l'écriture Anguleuse, de sorte qu'il est assez bon pour moi!
- J'ai couru plusieurs fois dans mes directives. A été écrit pour un rédacteur et cela s'est avéré fonctionner à la perfection. J'ai été à une rencontre avec Brad Vert et il a dit qu'Angular 2.0 va être énorme avec pas digérer cycle à l'aide de JS natif d'observer la capacité et à l'aide d'un polyfill pour les navigateurs manquent. À ce point, nous n'aurez pas besoin de faire ça. 🙂
- Hier j'ai vu une émission où l'appelant selectize.refreshItems() à l'intérieur de $timeout causée par la redoutable récursive digérer erreur. Aucune idées de comment cela pourrait être?
- À l'aide de $timeout œuvres, mauvais a une très mauvaise performance. Si vous avez beaucoup de diresctives il va rafraîchir le tout.
- Si vous utilisez $timeout plutôt que de natifs setTimeout, pourquoi ne pas utiliser $window au lieu de la maternelle window?
- Le point de l'utilisation de $timeout dans ce cas, c'est que $timeout assure que l'angle de champ est mis à jour correctement. Si un $digest n'est pas en cours, il va provoquer une nouvelle $digest à exécuter.
- Merci pour cette réponse! J'ai été à la recherche depuis hier un correctif à ce
- Merci de me dans le passé pour upvoting cette réponse. +1 pour moi. Le $$phase de truc n'est même pas de travail à tous
- Ce doit être la MEILLEURE réponse à cette question. Il fonctionne mieux. Cependant, n'oubliez pas d'effacer l'expiration de la sorte : var myTimer =$timeout(function(){/*code to execute here*/ $timeout.cancel(myTimer); })
- Ce n'est pas une chose. Lorsque le corps de la fonction transmise à $timeout est exécuté, la promesse est déjà résolu! Il n'y a absolument aucune raison de cancel il. À partir de la docs: "en conséquence de cela, la promesse sera résolu avec un rejet." Vous ne pouvez pas résoudre un résolus promesse. Votre annulation ne cause pas des erreurs, mais il ne sera pas faire quelque chose de positif non plus.
InformationsquelleAutor betaorbust
322

Le digérer cycle est un appel synchrone. Ne pas céder le contrôle du navigateur d'événements en boucle jusqu'à ce qu'il se fait. Il existe quelques moyens pour y remédier. La meilleure façon de traiter cette question est d'utiliser le construit en $timeout, et une seconde manière, si vous utilisez le trait de soulignement ou lodash (et vous devriez), appelez le suivant:
```
$timeout(function(){
    //any code in here will automatically have an apply run afterwards
});
```
ou si vous avez lodash:
```
_.defer(function(){$scope.$apply();});
```
Nous avons essayé plusieurs solutions, et nous avons détesté l'injection de $rootScope dans l'ensemble de nos contrôleurs, des directives, et même de certaines usines. Ainsi, l' $timeout "et"_".reporter ont été notre préféré à ce jour. Ces méthodes avec succès le dire angulaire d'attendre jusqu'à la prochaine animation en boucle, ce qui permettra de garantir que le champ d'application actuel.$appliquer plus de.
- _.reporter attend pour le prochain événement du cycle. Le résumé actuel sera fait d'ici là, si le $scope.$appliquer sera libre à exécuter, car il n'y aura pas digérer en cours d'exécution.
- Super! À des fins de débogage: console.log ("digérer?: ', !!$la portée.$$phase || !!$la portée.$root.$$phase); _.reporter(function() { console.log ("digérer?: ', !!$la portée.$$phase || !!$la portée.$root.$$phase); }); La première instruction renvoie la valeur true si $digest est en cours de traitement; la seconde renvoie false, telle qu'elle est exécutée lorsque la boucle d'événement de a pop off toutes les tâches en attente.
- Est-ce comparable à l'aide de $timeout(...)? J'ai utilisé $timeout, dans plusieurs cas, de reporter à la prochaine manifestation de cycle et il semble bien fonctionner--ce que quelqu'un sait si il y a une raison de ne pas utiliser $timeout?
- Cela devrait vraiment être utilisé seulement si vous utilisez déjà underscore.js. Cette solution n'est pas la peine de l'importation de l'ensemble de souligner la bibliothèque juste à utiliser ses defer fonction. Je préfère de beaucoup le $timeout solution parce que tout le monde a déjà accès à $timeout par angulaire, sans dépendances sur d'autres bibliothèques.
- Vrai... mais si vous n'utilisez pas de souligner ou de lodash... vous avez besoin de réévaluer ce que vous faites. Ces deux libs ont changé la façon dont le code ressemble.
- J'ai essayé de remplacer un if (!$rootScope.$$phase) avec _.defer() dans une directive, mais cela ne semble pas fonctionner dans mon cas. La directive fait une transition css, par le biais de jQuery.animate() et écrit la largeur et la hauteur en arrière dans le périmètre au cours de l'animation étapes. Avec scope.$$phase j'ai toujours une largeur et hauteur de la valeur dans le champ d'application (un graphique directive exige que ces valeurs et renvoie une erreur, si elles ne sont pas définies), avec _.defer() ils semblent être trop tard. Je n'ai pas analysé plus profondes, mais dans ma situation $rootScope.$$phase œuvres, alors que _.defer() ne l'est pas.
- Nous avons lodash comme une dépendance de Restangular (nous allons éliminer Restangular en faveur de ng-route bientôt). Je pense que c'est une bonne réponse, mais ce n'est pas grand pour assumer les gens veulent utiliser le trait de soulignement/lodash. Par tous les moyens ces libs sont beaux... si vous les utiliser assez... ces jours-je utiliser ES5 méthodes qui anéantir 98% de la raison pour laquelle j' utilisé pour inclure le trait de soulignement.
- La bonne façon d'utiliser angularjs est d'utiliser une dépendance qui ne sont pas intégrés, ni mentionnées dans leurs docs? Quelque chose ne fonctionne pas.
- Vous avez raison @SgtPooki. J'ai modifié la réponse à inclure la possibilité d'utiliser $timeout ainsi. $timeout "et"_".reporter permettra à la fois d'attendre jusqu'à la prochaine animation en boucle, ce qui permettra de s'assurer que l'étendue actuelle.$appliquer a pris fin. Merci de me tenir à l'honnête, et me demandant de mettre à jour la réponse ici.
- merci pour l'amélioration de la réponse, mais encore, ne le angularjs docs suggèrent même l' $timeout méthode? Je suis déçu qu'un grand bibliothèque n'a toujours pas réussi à traiter correctement ce problème. Ils mentionnent les anti-modèles sur leur github page mais n'ont pas de suggestions pour les pro-modèle qui résout ce problème. De Plus, il serait extrêmement trivial à mettre en œuvre leurs propres reporter/timeout méthode au sein de l' $scope.$appliquer() qui gère ce scénario... bah, je m'égare maintenant.
- Appeler vieux chapeau, mais à l'aide de quelque chose qui s'appelle $(timeout) pour essentiellement à jour l'INTERFACE utilisateur me fait absolument grincer des dents. Même si ils ont juste écrit un wrapper pour elle comme "updateWhenPossible" ou quelque chose de stupide comme ça permettrait de me calmer. Je suis d'accord avec @SgtPooki - cette question devrait être abordée.
- "nous avons détesté l'injection de $rootScope dans l'ensemble de nos contrôleurs, des directives, et même certaines usines" Pourquoi voudriez-vous faire cela? L'appel de $scope.$apply() est quelque chose qui ne devrait être fait RAREMENT en cas de coin, non pas comme une question de cours pour les fonctionnalités standard.
- lorsque vous avez beaucoup de l'intégration avec des choses en dehors de l'angulaire, comme l'épine dorsale, les websockets, etc, vous finissez par avoir besoin d'un rappel dans Angulaire plus souvent que vous le souhaitez.
- Du sens. J'ai l'habitude de simplement essayer de garder une pile qui joue bien ensemble.
- comme u devrait. Je travaille actuellement sur un projet qui est massive, a commencé de la colonne vertébrale, et n'est pas entièrement coverted angulaire encore. Dans ces scénarios, vous devez revenir dans angulaire souvent.
- Dans le cas où quelqu'un a été vous demandez-vous (comme moi), cela ne fonctionne PAS: _.defer($scope.$apply);. Franchement, je ne sais pas encore pourquoi pas... :-/
- Il n'a pas de travail car il a été l'appel $apply dans le cadre de la fenêtre, pas de la $scope. Cela aurait fonctionné: _.defer($scope.$apply.bind($scope)), cause vous êtes la liaison le contexte de $apply être $scope.
- vous avez besoin d'injecter $timeout sinon il va donner d'erreur.stackoverflow.com/a/19009389
InformationsquelleAutor frosty
265

Beaucoup de réponses ici, contiennent de bons conseils, mais peut aussi conduire à la confusion. Simplement à l'aide de $timeout est pas la meilleure, ni la bonne solution.
Aussi, assurez-vous de lire que si vous êtes préoccupé par les performances ou l'évolutivité.

Choses que vous devez savoir
- $$phase est privé pour le cadre et il y a de bonnes raisons pour cela.
- $timeout(callback) va attendre jusqu'à ce que le résumé actuel cycle (le cas échéant) est fait, puis exécuter la fonction de rappel, puis exécuter à la fin une pleine $apply.
- $timeout(callback, delay, false) va faire la même chose (avec une option de délai avant l'exécution de la fonction de rappel), mais ne sera pas le feu à un $apply (troisième argument) qui enregistre des performances si vous n'avez pas modifié votre Angulaire du modèle ($champ).
- $scope.$apply(callback) invoque, entre autres choses, $rootScope.$digest, ce qui signifie qu'il sera redigest la racine de la portée de la demande et de tous ses enfants, même si vous êtes dans un cas isolé portée.
- $scope.$digest() sera tout simplement synchroniser son modèle à la vue, mais ne sera pas digérer ses parents portée, ce qui permet d'économiser beaucoup de performances lorsque vous travaillez sur une partie isolée de votre code HTML avec un isolé champ d'application (à partir d'une directive pour la plupart). $digest ne prenez pas un rappel: vous exécutez le code, puis digérer.
- $scope.$evalAsync(callback) a été introduit avec angularjs 1.2, et sera probablement résoudre la plupart de vos problèmes. Veuillez consulter le dernier paragraphe pour en savoir plus à ce sujet.
- si vous obtenez le $digest already in progress error, alors votre architecture est faux: soit vous n'avez pas besoin de redigest votre portée, ou vous ne devriez pas être en charge de ce (voir ci-dessous).
Comment structurer votre code

Quand vous obtenez une erreur, vous êtes en train de digérer votre portée alors qu'il est déjà en cours: car vous ne savez pas l'état de votre portée à ce point, vous n'êtes pas en charge de la relation avec sa digestion.
```
function editModel() {
  $scope.someVar = someVal;
  /* Do not apply your scope here since we don't know if that
     function is called synchronously from Angular or from an
     asynchronous code */
}

//Processed by Angular, for instance called by a ng-click directive
$scope.applyModelSynchronously = function() {
  //No need to digest
  editModel();
}

//Any kind of asynchronous code, for instance a server request
callServer(function() {
  /* That code is not watched nor digested by Angular, thus we
     can safely $apply it */
  $scope.$apply(editModel);
});
```
Et si vous savez ce que vous faites et de travailler sur un isolé petites directive, alors qu'une partie d'un grand Angulaire de l'application, vous pourriez préférer $digest au lieu de plus de $sur appliquer pour enregistrer les spectacles.

Mise à jour depuis Angularjs 1.2

Un nouvel outil de méthode a été ajoutée à tout $portée: $evalAsync. Fondamentalement, il exécutera son rappel dans le résumé actuel cycle si l'on est en cours, sinon, un nouveau digérer cycle démarre l'exécution de la fonction de rappel.

Qui n'est toujours pas aussi bon qu'un $scope.$digest si vous savez vraiment que vous avez seulement besoin de synchroniser une partie isolée de votre code HTML (depuis un nouveau $apply sera déclenchée si aucun n'est en cours), mais c'est la meilleure solution lorsque vous exécutez une fonction qui vous ne pouvez pas savoir si elle sera exécutée de façon synchrone ou non, par exemple, après l'extraction d'une ressource potentiellement mis en cache: parfois, cela nécessitera un appel asynchrone à un serveur, sinon la ressource localement récupéré de manière synchrone.

Dans ces cas, et tous les autres où vous avez eu une !$scope.$$phase, assurez-vous d'utiliser $scope.$evalAsync( callback )
- $timeout est critiqué en passant. Pouvez-vous donner plus de raisons d'éviter $timeout ?
InformationsquelleAutor floribon
88

Peu maniable méthode d'aide à garder le processus SEC:
```
function safeApply(scope, fn) {
    (scope.$$phase || scope.$root.$$phase) ? fn() : scope.$apply(fn);
}
```
- Votre safeApply m'a aidé à comprendre ce qui se passait beaucoup plus que n'importe quoi d'autre. Merci pour l'afficher.
- J'étais sur le point de faire la même chose, mais ne fait pas ce qu'il y a une chance que les changements que nous faisons dans fn() ne sera pas vu par $digest? Ne serait-il pas préférable de retarder la fonction, en supposant portée.$$phase === '$digest' ?
- Je suis d'accord, parfois, $apply() est utilisée pour déclencher le digérer, juste appeler le fn par lui-même... ne pas entraîner un problème?
- Je me sens comme scope.$apply(fn); devrait être scope.$apply(fn()); parce que fn() exécute la fonction et pas fn. S'il vous plaît aidez-moi à l'endroit où je me trompe
- La réponse par Iambinator est en fait de travail, mais je n'ai pas compris comment ça fonctionne
- L'appel à $s'appliquent prend en charge plusieurs types d'arguments, y compris les fonctions. Si elle est adoptée une fonction, il évalue la fonction.
InformationsquelleAutor lambinator

J'ai eu le même problème avec des tiers, des scripts comme CodeMirror, par exemple, et Krpano,
et même en utilisant safeApply méthodes mentionnées ici n'ont pas résolu l'erreur pour moi.

Mais ce qui ne l'a résolu est à l'aide de $timeout service (ne pas oublier de se l'injecter en premier).

Donc, quelque chose comme:

$timeout(function() {
  //run my code safely here
})

et si à l'intérieur de votre code que vous utilisez

ce

peut-être parce que c'est à l'intérieur d'une usine de directive du contrôleur ou tout simplement besoin d'un certain type de liaison, alors vous devez faire quelque chose comme:

.factory('myClass', [
  '$timeout',
  function($timeout) {

    var myClass = function() {};

    myClass.prototype.surprise = function() {
      //Do something suprising! :D
    };

    myClass.prototype.beAmazing = function() {
      //Here 'this' referes to the current instance of myClass

      $timeout(angular.bind(this, function() {
          //Run my code safely here and this is not undefined but
          //the same as outside of this anonymous function
          this.surprise();
       }));
    }

    return new myClass();

  }]
)

InformationsquelleAutor Ciul

32

Voir http://docs.angularjs.org/error/$rootScope:inprog

Le problème se pose lorsque vous avez un appel à $apply qui est parfois exécuter de manière asynchrone à l'extérieur du Angulaire de code (quand $s'appliquent doivent être utilisés) et parfois de façon synchrone à l'intérieur Angulaire de code (ce qui provoque la $digest already in progress erreur).

Cela peut arriver, par exemple, lorsque vous avez une bibliothèque de façon asynchrone extrait des éléments à partir d'un serveur et les caches. La première fois qu'un élément est demandée, elle est récupérée de manière asynchrone afin de ne pas bloquer l'exécution de code. La deuxième fois, cependant, l'article est déjà dans le cache de sorte qu'il peut être récupéré de manière synchrone.

La façon d'éviter cette erreur est de s'assurer que le code qui appelle $apply est exécuté de manière asynchrone. Cela peut être fait par l'exécution de votre code à l'intérieur d'un appel à $timeout avec le délai de 0 (qui est la valeur par défaut). Toutefois, l'appel de votre code à l'intérieur de $timeout supprime la nécessité d'appeler $apply, parce que $timeout sera le déclencheur d'une autre $digest cycle sur son propre, qui, à leur tour, faire toutes les mises à jour nécessaires, etc.

Solution

En bref, au lieu de faire ceci:
```
... your controller code...

$http.get('some/url', function(data){
    $scope.$apply(function(){
        $scope.mydate = data.mydata;
    });
});

... more of your controller code...
```
ce faire:
```
... your controller code...

$http.get('some/url', function(data){
    $timeout(function(){
        $scope.mydate = data.mydata;
    });
});

... more of your controller code...
```
Seulement appel $apply quand vous savez que le code marche, il va toujours être exécuté en dehors de l'Angulaire de code (par exemple, votre appel à $s'appliquent va se passer à l'intérieur d'un callback qui est appelée par le code de l'extérieur de votre Angulaire de code).

À moins que quelqu'un est au courant de certains percutants inconvénient de l'utilisation des $timeout sur $apply, je ne vois pas pourquoi vous ne pouvez pas toujours utiliser $timeout (avec retard zéro) au lieu de $apply, comme il le fera approximativement la même chose.
- Merci, cela a fonctionné pour mon cas où je ne suis pas d'appel $apply moi-même, mais encore obtenir l'erreur.
- La principale différence est que $apply est synchrone (son rappel est exécutée, puis le code suivant $s'appliquent), tandis que $timeoutn'est pas: le code actuel de délai suivantes est exécutée, puis une nouvelle pile commence avec son rappel, comme si vous étiez à l'aide de setTimeout. Qui pourrait conduire à des problèmes graphiques si vous ont été mise à jour deux fois le même modèle: $timeout va attendre la vue pour vous rafraîchir avant de mettre à jour à nouveau.
- Merci bien, threed. J'ai eu une méthode appelée comme un résultat de l'ordre de $activité de veille, et a été d'essayer de mettre à jour l'INTERFACE utilisateur avant mon filtre externe a fini de s'exécuter. En le plaçant à l'intérieur d'un $timeout fonction a fonctionné pour moi.
InformationsquelleAutor Trevor
28

Lorsque vous obtenez cette erreur, cela signifie qu'il est déjà dans le processus de mise à jour de votre point de vue. Vous ne devriez vraiment pas besoin d'appeler $apply() au sein de votre contrôleur. Si votre vue n'est pas mise à jour que vous pouvez vous attendre, et puis, vous obtenez cette erreur après l'appel de $apply(), cela signifie très probablement que vous n'êtes pas la mise à jour de la le modèle correctement. Si vous poster quelques détails, nous avons pu comprendre le cœur du problème.
- heh, j'ai passé toute la journée à savoir que AngularJS ne peuvent tout simplement pas regarder les liaisons "comme par magie" et je dois le pousser parfois avec $apply().
- ce qui signifie pour les you're not updating the the model correctly? $scope.err_message = 'err message'; n'est pas de mise à jour correct?
- Le seul moment où vous devez appeler $apply() est lorsque vous mettez à jour le modèle de "l'extérieur" du angulaire(par exemple à partir d'un plugin jQuery). Il est facile de tomber dans le piège de la vue ne cherche pas à droite, et ainsi de vous jeter un tas de $apply()s partout, les extrémités puis avec l'erreur vu dans l'OP. Quand je dis you're not updating the the model correctly je viens de dire toute la logique métier pas correctement le remplissage de tout ce qui pourrait être dans le champ d'application, ce qui conduit à la vue ne regarde pas comme prévu.
- Je suis d'accord, et j'ai écrit la réponse. Sachant ce que je sais maintenant, je voudrais utiliser $timeout(function(){...}); Il fait la même chose que _.reporter n'. Ils ont tous les deux de reporter à la prochaine animation en boucle.
InformationsquelleAutor dnc253
14

La forme la plus courte de sécurité $apply est:
```
$timeout(angular.noop)
```
InformationsquelleAutor Warlock
11

Vous pouvez également utiliser evalAsync. Il sera exécuté peu de temps après digest a fini!
```
scope.evalAsync(function(scope){
    //use the scope...
});
```
InformationsquelleAutor CMCDragonkai
10

Tout d'abord, ne pas fixer de cette façon
```
if ( ! $scope.$$phase) { 
  $scope.$apply(); 
}
```
Il n'a pas de sens parce que $phase est juste un indicateur booléen pour l' $digest cycle, de sorte que votre $apply() parfois ne fonctionne pas. Et n'oubliez pas que c'est une mauvaise pratique.

Au lieu de cela, utiliser $timeout
```
    $timeout(function(){ 
  //Any code in here will automatically have an $scope.apply() run afterwards 
$scope.myvar = newValue; 
  //And it just works! 
});
```
Si vous utilisez le trait de soulignement ou lodash, vous pouvez utiliser reporter():
```
_.defer(function(){ 
  $scope.$apply(); 
});
```
InformationsquelleAutor Sagar M
9

Parfois, vous aurez toujours des erreurs si vous utilisez cette manière (https://stackoverflow.com/a/12859093/801426).

Essayez ceci:
```
if(! $rootScope.$root.$$phase) {
...
```
- en utilisant à la fois !$la portée.$$la phase et à !$la portée.$root.$$phase (non !$rootScope.$root.$$phase) fonctionne pour moi. +1
- $rootScope et anyScope.$root sont les mêmes gars. $rootScope.$root est redondante.
InformationsquelleAutor bullgare
5

Vous devez utiliser $evalAsync ou $timeout selon le contexte.

C'est un lien avec une bonne explication:

http://www.bennadel.com/blog/2605-scope-evalasync-vs-timeout-in-angularjs.htm

InformationsquelleAutor Luc
4

Je vous conseille d'utiliser un événement personnalisé plutôt que de déclencher une digérer cycle.

Je viens de trouver que la radiodiffusion des événements personnalisés et enregistrer les écouteurs pour cet événement est une bonne solution pour le déclenchement d'une action que vous souhaitez se produire si oui ou non vous êtes dans un condensé de cycle.

Par la création d'un événement personnalisé vous sont également d'être plus efficace avec votre code, parce que vous êtes seulement de déclenchement des auditeurs souscrit à l'événement et de ne PAS déclencher toutes les montres liée à la portée, comme vous le feriez si vous avez appelé la portée.$s'appliquent.
```
$scope.$on('customEventName', function (optionalCustomEventArguments) {
   //TODO: Respond to event
});


$scope.$broadcast('customEventName', optionalCustomEventArguments);
```
InformationsquelleAutor nelsonomuto

essayez d'utiliser

$scope.applyAsync(function() {
    //your code
});

au lieu de

if(!$scope.$$phase) {
  //$digest or $apply
}

$applyAsync Calendrier de l'invocation de $s'appliquent à se produire à une date ultérieure. Ceci peut être utilisé à la file d'attente de plusieurs expressions qui doivent être évalués dans la même empreinte.

REMARQUE: Dans le $digest, $applyAsync() ne flush, si le champ d'application actuel est de $rootScope. Cela signifie que si vous appelez $condensé sur un enfant, il ne sera pas implicitement rincer l' $applyAsync() de la file d'attente.

Exemple:

  $scope.$applyAsync(function () {
                if (!authService.authenticated) {
                    return;
                }

                if (vm.file !== null) {
                    loadService.setState(SignWizardStates.SIGN);
                } else {
                    loadService.setState(SignWizardStates.UPLOAD_FILE);
                }
            });

Références:

1.La portée.$applyAsync() vs Portée.$evalAsync() dans AngularJS 1.3

AngularJs Docs

InformationsquelleAutor Eduardo Eljaiek

yearofmoo fait un excellent travail à la création d'une réutilisables $safeApply pour nous :

https://github.com/yearofmoo/AngularJS-Scope.SafeApply

Utilisation :

//use by itself
$scope.$safeApply();

//tell it which scope to update
$scope.$safeApply($scope);
$scope.$safeApply($anotherScope);

//pass in an update function that gets called when the digest is going on...
$scope.$safeApply(function() {

});

//pass in both a scope and a function
$scope.$safeApply($anotherScope,function() {

});

//call it on the rootScope
$rootScope.$safeApply();
$rootScope.$safeApply($rootScope);
$rootScope.$safeApply($scope);
$rootScope.$safeApply($scope, fn);
$rootScope.$safeApply(fn);

InformationsquelleAutor RNobel

2

utilisation $scope.$$phase || $scope.$apply(); au lieu

InformationsquelleAutor Visakh B Sujathan
1

Comprendre que l'angle de documents d'appel vérification de la $$phase un anti-modèle, j'ai essayé d'obtenir $timeout et _.defer de travail.

Le délai d'attente et différés méthodes permettent de créer un flash de unparsed {{myVar}} contenu dans les dom comme un FOUT. Pour moi, ce n'était pas acceptable. Il me laisse sans trop être dit de façon dogmatique que quelque chose est un hack, et ne pas avoir une alternative adaptée.

La seule chose qui fonctionne à chaque fois est:

if(scope.$$phase !== '$digest'){ scope.$digest() }.

Je ne comprends pas le danger de cette méthode, ou pourquoi il est décrit comme un hack de gens dans les commentaires et l'angulaire de l'équipe. La commande semble précis et facile à lire:

"Les digérer, sauf si l'on est déjà en cours"

En CoffeeScript, c'est encore plus joli:

scope.$digest() unless scope.$$phase is '$digest'

Quel est le problème avec ça? Est-il une alternative qui ne crée pas de FOUT? $safeApply semble bien, mais utilise le $$phase méthode d'inspection, trop.
- Je serais ravi de voir une réponse éclairée à cette question!
- Il s'agit d'un hack car cela signifie que vous manquez de contexte ou de ne pas comprendre le code un ce point: soit vous êtes dans angulaire digérer cycle et vous n'en avez pas besoin, ou si vous êtes en mode asynchrone en dehors de cela, et puis vous en avez besoin. Si vous ne pouvez pas savoir que, dans ce point du code, alors vous n'êtes pas responsable de la digérer
InformationsquelleAutor SimplGy

C'est mon utils services:

angular.module('myApp', []).service('Utils', function Utils($timeout) {
    var Super = this;

    this.doWhenReady = function(scope, callback, args) {
        if(!scope.$$phase) {
            if (args instanceof Array)
                callback.apply(scope, Array.prototype.slice.call(args))
            else
                callback();
        }
        else {
            $timeout(function() {
                Super.doWhenReady(scope, callback, args);
            }, 250);
        }
    };
});

et ceci est un exemple de son utilisation:

angular.module('myApp').controller('MyCtrl', function ($scope, Utils) {
    $scope.foo = function() {
        //some code here . . .
    };

    Utils.doWhenReady($scope, $scope.foo);

    $scope.fooWithParams = function(p1, p2) {
        //some code here . . .
    };

    Utils.doWhenReady($scope, $scope.fooWithParams, ['value1', 'value2']);
};

InformationsquelleAutor ranbuch

J'ai été en utilisant cette méthode et il semble fonctionner parfaitement bien. Cette juste attend pour le moment, le cycle est terminé et puis déclenche apply(). Il suffit d'appeler la fonction apply(<your scope>) à partir de n'importe où vous voulez.

function apply(scope) {
  if (!scope.$$phase && !scope.$root.$$phase) {
    scope.$apply();
    console.log("Scope Apply Done !!");
  } 
  else {
    console.log("Scheduling Apply after 200ms digest cycle already in progress");
    setTimeout(function() {
        apply(scope)
    }, 200);
  }
}

InformationsquelleAutor Ashu

1

Lorsque j'ai désactivé le débogueur , l'erreur ne se produit pas plus. Dans mon cas, c'était à cause de débogueur l'arrêt de l'exécution de code.

InformationsquelleAutor jmojico

semblables à des réponses ci-dessus, mais cela a fonctionné fidèlement pour moi...
dans un service ajouter:

    //sometimes you need to refresh scope, use this to prevent conflict
    this.applyAsNeeded = function (scope) {
        if (!scope.$$phase) {
            scope.$apply();
        }
    };

InformationsquelleAutor Shawn Dotey

Vous pouvez utiliser

$timeout

pour éviter l'erreur.

 $timeout(function () {
                        var scope = angular.element($("#myController")).scope();
                        scope.myMethod();
                        scope.$scope();
                    },1);

Que faire si je ne veux pas utiliser $timeout

InformationsquelleAutor Satish Singh

0

La question est fondamentalement à venir quand, nous demandons angulaire pour exécuter le digest du cycle, même si son processus de création problème angulaire de la compréhension. conséquence exception dans la console.

1. Il n'a pas de sens d'appeler portée.$appliquer() à l'intérieur de l' $timeout, car intérieurement il en fait de même.

2. Le code va avec la vanille fonction JavaScript en raison de ses natif de ne pas angulaire définie à savoir setTimeout

3. Pour ce faire vous pouvez utiliser

si(!la portée.$$phase){

la portée.$evalAsync(function(){

});
}

InformationsquelleAutor Sachin Mishra

-3

Trouvé ceci: https://coderwall.com/p/ngisma où Nathan Walker (près de bas de page) suggère un décorateur $rootScope pour créer func 'safeApply', code:

yourAwesomeModule.config([
  '$provide', function($provide) {
    return $provide.decorator('$rootScope', [
      '$delegate', function($delegate) {
        $delegate.safeApply = function(fn) {
          var phase = $delegate.$$phase;
          if (phase === "$apply" || phase === "$digest") {
            if (fn && typeof fn === 'function') {
              fn();
            }
          } else {
            $delegate.$apply(fn);
          }
        };
        return $delegate;
      }
    ]);
  }
]);

InformationsquelleAutor Warren Davis

-7

Ce sera de résoudre votre problème:
```
if(!$scope.$$phase) {
  //TODO
}
```
- Ne pas le faire if (!$la portée.$$phase) $scope.$appliquer(), cela signifie que votre $scope.$appliquer() n'est pas assez haut dans la pile d'appel.
InformationsquelleAutor

Vous devez vous connecter pour publier un commentaire.

Choses que vous devez savoir

Comment structurer votre code

Mise à jour depuis Angularjs 1.2