AngularJS에서 바인딩 및 다이제스트는 어떻게 작동합니까?

AngularJS에서 바인딩 및 다이제스트는 어떻게 작동합니까?

---

AngularJS를 다른 JavaScript-MVC 프레임 워크와 구별하는 한 가지는 바인딩을 사용하여 JavaScript에서 HTML로 바인딩 된 값을 에코하는 기능입니다. Angular는 $ scope 변수에 값을 할당 할 때 "자동으로"이 작업을 수행합니다.

그러나 이것은 얼마나 자동적입니까? 때로는 Angular가 변경 사항을 받아들이지 않으므로 $ scope. $ apply () 또는 $ scope. $ digest ()를 호출하여 변경 사항을 가져 오도록 angular에 알려야합니다. 때로는 이러한 방법 중 하나를 실행하면 오류가 발생하고 다이제스트가 이미 진행 중이라고 말합니다.

바인딩 ({{}} 중괄호 또는 ng-attributes 내부의 모든 것)이 eval과 함께 에코되기 때문에 Angular가 계속해서 $ scope 객체를 폴링하여 변경 사항을 찾은 다음 평가를 수행하여 해당 변경 사항을 DOM /에 푸시한다는 의미입니다. HTML? 아니면 AngularJS는 변수 값이 변경되거나 할당 될 때 트리거되는 이벤트를 발생시키는 사용 매직 변수를 어떻게 든 알아 냈습니까? 모든 브라우저에서 완벽하게 지원된다는 소식을 들어 본 적이 없어서 의심 스럽습니다.

AngularJS는 바인딩 및 범위 변수를 어떻게 추적합니까?

---

Mark가 찾은 문서 섹션 외에도 가능한 모든 변경 소스를 열거 할 수 있다고 생각합니다.

1. HTML 입력과 사용자 상호 작용 ( 'text' , 'number' , 'url' , 'email' , 'radio' , 'checkbox' ). AngularJS에는 inputDirective가 있습니다. 'text', 'number', 'url'및 'email'입력 은 'input'또는 'keydown'이벤트에 대한 리스너 핸들러 를 바인딩 합니다. 리스너 핸들러 는 scope. $ apply를 호출합니다 . 'radio'및 'checkbox'는 click 이벤트에 대해 유사한 핸들러를 바인딩합니다.
2. 선택 요소와 사용자 상호 작용. AngularJS는 '변경'이벤트에서 비슷한 동작을하는 selectDirective 를 가지고 있습니다.
3. $ rootScope. $ apply ()를 수행 하는 $ timeout 서비스 를 사용하여 주기적으로 변경 합니다.
4. eventDirectives (ngClick 등)도 scope. $ apply를 사용 합니다 .
5. $ http는 $ rootScope. $ apply () 도 사용합니다 .
6. AngularJS 외부의 변경 사항은 알고있는대로 scope. $ apply를 사용해야합니다.

---

폴링이 아니라 내부 실행 루프를 사용하는 것을 알았으므로 $ apply () 또는 $ digest ()를 사용하여 작업을 시작해야합니다.

Miško의 설명 은 매우 철저하지만 Angular는 자신의 컨텍스트 내에서 어떤 일이 발생할 때마다 $ scope가 명확한 내부 상태로 돌아가도록 노력하고 있다는 것입니다. 이것은 모델 상태 사이에서 상당히 튀어 나와야 할 수 있으므로 $ watch () 실행에 한 번만 의존 할 수없는 이유와 모델 간의 관계를 수동으로 설정하는 데주의해야하는 이유이기도합니다. 그렇지 않으면 끝이 없습니다. 순환 새로 고침.

참고 URL : https://stackoverflow.com/questions/12463902/how-does-the-binding-and-digesting-work-in-angularjs