Angular: Ubah kesalahan deteksi -> loop tak terbatas

Dibuat pada 23 Sep 2015 · 3Komentar · Sumber: angular/angular

Saya menemukan kasus di mana deteksi perubahan memasuki loop tak terbatas pada kesalahan.

Kode yang dimaksud:

@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>
  `
})

Kuncinya adalah ekspresi !d.valid ng-if !d.valid . d tidak ditentukan, dan ini memicu infinite loop.

Berikut adalah contoh Plunker lengkap .

hours bufix

Sumber

alxhub

Komentar yang paling membantu

Saya melacak akar penyebabnya:

NgControlGroup mendeklarasikan metode onInit , yang menjadwalkan beberapa pekerjaan untuk diselesaikan secara asinkron, melalui PromiseWrapper.resolve .

Masalahnya adalah onInit sebenarnya dapat dipanggil beberapa kali - dipanggil jika deteksi perubahan berjalan dan tidak pernah berhasil diselesaikan. Jika pengecualian terjadi selama deteksi perubahan setelah onInit dipanggil, AbstractChangeDetector.alreadyChecked tidak akan disetel dan onInit akan dijalankan lagi selama centang berikutnya. Karena onInit di NgControlGroup menjadwalkan pekerjaan asinkron, centang berikutnya akan segera terjadi, menyebabkan crash loop.

alxhub pada 29 Sep 2015

👍2

Semua 3 komentar

Sepertinya <div ng-control-group='credentials'></div> dikombinasikan dengan ng-if sudah cukup untuk memicu bug.

alxhub pada 23 Sep 2015

Saya melacak akar penyebabnya:

NgControlGroup mendeklarasikan metode onInit , yang menjadwalkan beberapa pekerjaan untuk diselesaikan secara asinkron, melalui PromiseWrapper.resolve .