Angular: Erreur de détection de changement -> boucle infinie

Créé le 23 sept. 2015 · 3Commentaires · Source: angular/angular

J'ai trouvé un cas où la détection de changement entre dans une boucle infinie sur une erreur.

Le code en question :

@Component({selector: "signup-comp"})
@View({
  directives: [CORE_DIRECTIVES, FORM_DIRECTIVES],
  template: `
    <form #f="form" (ng-submit)='onSignUp(f.value)'>
      <div ng-control-group='credentials' #credentials="form">
        Login <input type='text' ng-control='login'>
        Password <input type='password' ng-control='password'>
      </div>
      <div *ng-if="!d.valid">Credentials are invalid</div>
      <div ng-control-group='personal'>
        Name <input type='text' ng-control='name'>
      </div>
      <button type='submit'>Sign Up!</button>
    </form>
  `
})

La clé est l'expression !d.valid ng-if !d.valid . d n'est pas défini, et cela déclenche une boucle infinie.

Voici un exemple Plunker complet .

hours bufix

Source

alxhub

Commentaire le plus utile

J'ai recherché la cause racine :

NgControlGroup déclare une méthode onInit , qui planifie certains travaux à terminer de manière asynchrone, via PromiseWrapper.resolve .

Le problème est que onInit peut en fait être appelé plusieurs fois - il est appelé si la détection de changement s'exécute et ne s'est jamais terminée avec succès. Si une exception se produit pendant la détection de changement après l'appel de onInit , AbstractChangeDetector.alreadyChecked ne sera pas défini et onInit sera exécuté à nouveau lors du prochain tick. Étant donné que onInit dans NgControlGroup planifie un travail asynchrone, le prochain tick se produira immédiatement, provoquant une boucle de plantage.

alxhub le 29 sept. 2015

👍2

Tous les 3 commentaires

Il semble que <div ng-control-group='credentials'></div> combiné avec le ng-if soit suffisant pour déclencher le bogue.

alxhub le 23 sept. 2015

J'ai recherché la cause racine :

NgControlGroup déclare une méthode onInit , qui planifie certains travaux à terminer de manière asynchrone, via PromiseWrapper.resolve .

alxhub le 29 sept. 2015

👍2

Ce problème a été automatiquement verrouillé en raison de l'inactivité.
Veuillez déposer un nouveau problème si vous rencontrez un problème similaire ou connexe.

En savoir plus sur notre politique de verrouillage automatique des conversations .

_{_Cette action a été effectuée automatiquement par un bot._}