AngularJS가 DOM을 어떻게 업데이트합니까?

특히 innerHTML을 사용하지 않고 요소를 업데이트하는 방법에 대해 궁금합니다. 문서에서 그들은 그들이 don't re-render with innerHTML (ctrl-f innerHTML - 죄송합니다.) 때문에 다른 템플릿 엔진보다 어떻게 더 나은지 분명히 말합니다. 나는 소스 코드를 파고 들기 시작했는데, 그 중 많은 부분이 있었고 아마도 여러분으로부터 빠른 답을 얻을 수 있기를 희망했다.AngularJS가 DOM을 어떻게 업데이트합니까?

지금까지 내 추측이 있었다

컴파일러는 링커 때 데이터 변경 사항을 업데이트 할 수 있습니다 <ng-bind>test</ng-bind> 같은으로 {{test}} 변환,하지만 난의 DOM 볼 때 무슨 일이 일어나고이 아닌 것 같아 렌더링 된 각도 페이지. 또한 클라이언트의 CSS 및 Angular 외부의 다른 javascript 구성 요소를 방해 할 수있는 것처럼 보입니다.
그들은 실제로 innerHTML을 사용하고 있지만 전체 DOM을 다시 렌더링하지 않고 있습니다. 약간의 스 니펫 (사용자 정의 <ng-bind></ng-bind> 태그 내부의 데이터 일 수도 있음) 만 있습니다.
그들은 어떻게 든 제거하고 새로운 요소를 추가합니다 ... 나쁜 생각 같아요.

내가 배우고 싶다면 누구나 알고 싶다면. 그렇지 않으면 그것은 나를위한 소스 코드로 돌아 간다. , 컴파일러는 HTML 제비 뭔가 같은

<p> 
    {{model}} 
    <div> 
    <p> Hello ! </p> 
    </div> 
</p>

말 그리고이로 변환 :

편집 새로운 추측

좀 더 그것에 대해 생각하면, 나는 무슨 일이있을 수 있습니다 생각 :

<p class="ng-binding"> 
    {{model}} 
    <div> 
    <p> Hello ! </p> 
    </div> 
</p>

그런 다음 Angular can t crawl t hrough 및 모든 각도 텍스트 노드 ({{model}}) eg document.getElementsByClass('ng-binding')[0].childNodes[0]의 색인을 생성합니다. 저장된 각 노드는 링커에 의해 스코프 모델 $scope['model']과 연관 될 수 있습니다. node.nodeValue = $scope['somemodel] (단순화) 및 기술적으로 내부 HTML이없고 번개 속도 DOM을 업데이트하여 각 노드를 매우 빨리 업데이트 할 수 있습니다.

출처

2013-08-13 vin

오른쪽의 관련 링크에서 [AngularJS의 생각 방법] (http://stackoverflow.com/questions/14994391/)을 적극 권장합니다. –

@StephenP 휴! 좋은 물건 많이 거기, 감사합니다! 호기심에서, 나는 내 주말에 Angular의 일부 기능을 재 구현했다. 나는 내가 아는 바를 알았고, 왜 완전히 둥근 바퀴를 재발견 했는가? 나는이 제품의 핵심적인 내부 구조에 대해 특히 궁금했다. – vin

@vin, 어디서나 작품을 게시하고 있습니까? Angular에서 "how"를 더 잘 이해하려고 노력 중입니다. 특히 dom을 업데이트하는 방법이 더 좋습니다.코드에서 배우는 것에 크게 감사드립니다! – HelloWorld

innerHTML처럼 요소 자체를 바꾸는 대신 Angular는 기존 요소의 속성을 수정하는 것을 선호합니다.

ng-bind 지시어는 실제로 좋은 예입니다. 그것은 element에 대한 참조를 유지하고 단지 그 .text()$scope는 AS 변경 (source가) 업데이트 : 새로운 콘텐츠를 만드는 특히,

var ngBindDirective = ngDirective(function(scope, element, attr) { 
    element.addClass('ng-binding').data('$binding', attr.ngBind); 
    scope.$watch(attr.ngBind, function ngBindWatchAction(value) { 
    element.text(value == undefined ? '' : value); 
    }); 
});

이 반드시 각도는 시간에 innerHTML를 사용하지 않을 것을 의미하지 않는다. 그러나 가능할 때 그것을 피하려고합니다.

출처

2013-08-13 00:13:56

AngularJS가 DOM을 어떻게 업데이트합니까?

답변

관련 문제