javascript - How does AngularJS update the DOM? -
specifically, i'm wondering how update elements without using innerhtml. in docs, state how they're better other templating engines because don't re-render innerhtml (ctrl-f innerhtml -- sorry). started poking through source code there's lot of , hoping perhaps faster answer guys.
so far guesses have been
- the compiler converts
{{test}}
<ng-bind>test</ng-bind>
linker can update when data changes, doesn't seem happening when @ dom of rendered angular page. , seems interfere client's css , other javascript components external angular. - they using innerhtml they're not re-rendering entire dom -- small snippet of (perhaps data inside sort of custom
<ng-bind></ng-bind>
tag). - they're somehow removing , appending new elements ... bad guess think.
if knows i'd love learn. otherwise it's source code me.
edit new guess
after thinking more, believe might happens: compiler swallows html,
<p> {{model}} <div> <p> hello ! </p> </div> </p>
and converts this:
<p class="ng-binding"> {{model}} <div> <p> hello ! </p> </div> </p>
then angular can crawl through , index angular text nodes ( {{model}}
) eg document.getelementsbyclass('ng-binding')[0].childnodes[0]
. each stored node can associated linker scoped model $scope['model']
. each node can updated extremely setting node.nodevalue = $scope['somemodel
] (simplified)` , voilĂ , technically no innerhtml'ing , lightning speed dom updates.
rather replacing element itself, innerhtml
do, angular prefers modify properties of existing elements.
the ng-bind
directive example. keeps reference element
, updates .text()
$scope
changes (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); }); });
this doesn't mean angular won't use innerhtml
@ times, when creating new content. but, tries avoid when possible.
Comments
Post a Comment