Angular: 감지 였λ₯˜ λ³€κ²½ -> λ¬΄ν•œ 루프

에 λ§Œλ“  2015λ…„ 09μ›” 23일  Β·  3μ½”λ©˜νŠΈ  Β·  좜처: angular/angular

λ³€κ²½ 감지가 였λ₯˜μ— λŒ€ν•΄ λ¬΄ν•œ 루프에 λ“€μ–΄κ°€λŠ” 경우λ₯Ό λ°œκ²¬ν–ˆμŠ΅λ‹ˆλ‹€.

문제의 μ½”λ“œ:

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

핡심은 ng-if ν‘œν˜„μ‹ !d.valid μž…λ‹ˆλ‹€. d 이 μ •μ˜λ˜μ§€ μ•Šμ•˜μœΌλ©° μ΄λŠ” λ¬΄ν•œ 루프λ₯Ό νŠΈλ¦¬κ±°ν•©λ‹ˆλ‹€.

λ‹€μŒμ€ 전체 Plunker 예제 μž…λ‹ˆλ‹€.

hours bufix

κ°€μž₯ μœ μš©ν•œ λŒ“κΈ€

κ·Όλ³Έ 원인을 μΆ”μ ν–ˆμŠ΅λ‹ˆλ‹€.

NgControlGroup λŠ” PromiseWrapper.resolve λ₯Ό 톡해 일뢀 μž‘μ—…μ„ λΉ„λ™κΈ°μ‹μœΌλ‘œ μ™„λ£Œν•˜λ„λ‘ μ˜ˆμ•½ν•˜λŠ” onInit λ©”μ„œλ“œλ₯Ό μ„ μ–Έν•©λ‹ˆλ‹€.

λ¬Έμ œλŠ” onInit κ°€ μ‹€μ œλ‘œ μ—¬λŸ¬ 번 호좜될 수 μžˆλ‹€λŠ” κ²ƒμž…λ‹ˆλ‹€. λ³€κ²½ 감지가 μ‹€ν–‰λ˜κ³  μ„±κ³΅μ μœΌλ‘œ μ™„λ£Œλ˜μ§€ μ•Šμ€ 경우 ν˜ΈμΆœλ©λ‹ˆλ‹€. onInit κ°€ 호좜된 ν›„ λ³€κ²½ 감지 쀑에 μ˜ˆμ™Έκ°€ λ°œμƒν•˜λ©΄ AbstractChangeDetector.alreadyChecked κ°€ μ„€μ •λ˜μ§€ μ•Šκ³  λ‹€μŒ ν‹± λ™μ•ˆ onInit κ°€ λ‹€μ‹œ μ‹€ν–‰λ©λ‹ˆλ‹€. 이후 onInit μ—μ„œ NgControlGroup 일정을 λ‹€μŒ ν‹± 좩돌 루프λ₯Ό μΌμœΌν‚€λŠ” 원인이 μ¦‰μ‹œ 일어날 것이라고 비동기 μž‘μ—….

λͺ¨λ“  3 λŒ“κΈ€

<div ng-control-group='credentials'></div> 와 ng-if κ²°ν•©ν•˜λ©΄ 버그λ₯Ό μœ λ°œν•˜κΈ°μ— μΆ©λΆ„ν•œ 것 κ°™μŠ΅λ‹ˆλ‹€.

κ·Όλ³Έ 원인을 μΆ”μ ν–ˆμŠ΅λ‹ˆλ‹€.

NgControlGroup λŠ” PromiseWrapper.resolve λ₯Ό 톡해 일뢀 μž‘μ—…μ„ λΉ„λ™κΈ°μ‹μœΌλ‘œ μ™„λ£Œν•˜λ„λ‘ μ˜ˆμ•½ν•˜λŠ” onInit λ©”μ„œλ“œλ₯Ό μ„ μ–Έν•©λ‹ˆλ‹€.

λ¬Έμ œλŠ” onInit κ°€ μ‹€μ œλ‘œ μ—¬λŸ¬ 번 호좜될 수 μžˆλ‹€λŠ” κ²ƒμž…λ‹ˆλ‹€. λ³€κ²½ 감지가 μ‹€ν–‰λ˜κ³  μ„±κ³΅μ μœΌλ‘œ μ™„λ£Œλ˜μ§€ μ•Šμ€ 경우 ν˜ΈμΆœλ©λ‹ˆλ‹€. onInit κ°€ 호좜된 ν›„ λ³€κ²½ 감지 쀑에 μ˜ˆμ™Έκ°€ λ°œμƒν•˜λ©΄ AbstractChangeDetector.alreadyChecked κ°€ μ„€μ •λ˜μ§€ μ•Šκ³  λ‹€μŒ ν‹± λ™μ•ˆ onInit κ°€ λ‹€μ‹œ μ‹€ν–‰λ©λ‹ˆλ‹€. 이후 onInit μ—μ„œ NgControlGroup 일정을 λ‹€μŒ ν‹± 좩돌 루프λ₯Ό μΌμœΌν‚€λŠ” 원인이 μ¦‰μ‹œ 일어날 것이라고 비동기 μž‘μ—….

이 λ¬Έμ œλŠ” ν™œλ™μ΄ μ—†μ–΄ μžλ™μœΌλ‘œ μž κ²ΌμŠ΅λ‹ˆλ‹€.
μœ μ‚¬ν•˜κ±°λ‚˜ κ΄€λ ¨λœ λ¬Έμ œκ°€ λ°œμƒν•˜λ©΄ μƒˆ 문제λ₯Ό μ œμΆœν•˜μ‹­μ‹œμ˜€.

μžλ™ λŒ€ν™” 잠금 μ •μ±… 에 λŒ€ν•΄ μžμ„Ένžˆ μ•Œμ•„λ³΄μ„Έμš”.

_이 μž‘μ—…μ€ 봇에 μ˜ν•΄ μžλ™μœΌλ‘œ μˆ˜ν–‰λ˜μ—ˆμŠ΅λ‹ˆλ‹€._

이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰