AngularJS에서 바인딩과 소화는 어떻게 이루어 집니까?

Question

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

하지만 자동이 어떻게됩니까? 때로는 Angular가 변경 사항을 인식하지 못하기 때문에 $ scope를 호출해야합니다. $ apply() 또는 $ scope. $ digest()는 변경 내용을 각도로 알려줍니다. 때로는 그 중 하나를 실행하면 오류가 발생하고 이미 다이제스트가 진행 중임을 나타냅니다.

바인딩 ({{}} 중괄호 또는 ng-attributes 안에있는 항목)은 eval로 표시되므로 Angular가 $ scope 객체를 계속 폴링하여 변경 사항을 찾은 다음 eval을 사용하여 변경 사항을 푸시합니다. DOM/HTML에? 또는 AngularJS는 변수 값이 변경되거나 할당 될 때 트리거되는 이벤트를 발생시키는 사용 마술 변수를 어떻게 든 알아 냈습니까? 나는 모든 브라우저에서 완벽하게 지원되는 것을 들어 본 적이 없으므로 의심 스럽습니다.

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

Answer 1

Mark가 발견 한 documentation section 외에도 우리는 모든 가능한 변화 원인을 열거 할 수 있다고 생각합니다. HTML 입력을

1. 사용자 상호 작용 ('text', 'number', 'url', 'email', 'radio', 'checkbox'). AngularJS는 inputDirective입니다. 'text', 'number', 'url'및 'email'입력은 'input'또는 'keydown'이벤트에 대해 listener handler을 바인드합니다. 리스너 핸들러 calls scope.$apply. 'radio'와 'checkbox'는 click 이벤트와 유사한 핸들러를 묶는다.
2. 사용자가 select 요소와 상호 작용합니다. AngularJS는 selectDirective의 'change'이벤트와 비슷한 동작을합니다.
3. 도 $timeout service을 사용하는 정기 변경은 $rootScope.$apply()입니다.
4. eventDirectives (ngClick 등)도 scope.$apply을 사용하십시오.
5. $ http도 $rootScope.$apply()을 사용합니다.
6. AngularJS 외부에서 변경된 사항은 범위를 사용해야합니다. $ 알고 계신대로 적용하십시오.

Answer 2

폴링이 아니라는 사실을 알았지 만 내부 실행 루프를 사용하므로 모션을 실행하기 위해 $ apply() 또는 $ digest()를 사용해야합니다.

Miško's explanation은 매우 철저하지만, Angular는 자체 범위 내에서 어떤 일이 발생했을 때마다 $ scope를 명확한 내부 상태로 되돌리려 고하고 있습니다. 이것은 모델 상태들 사이에서 꽤 튀어 오를 수도 있습니다. 그래서 $ watch()를 한 번만 사용하고 모델 사이의 관계를 수동으로 설정하는 것에주의해야하는 이유는 끝없이 끝납니다. 순환 새로 고침.