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

Popular posts from this blog

ios - UICollectionView Self Sizing Cells with Auto Layout -

node.js - ldapjs - write after end error -

DOM Manipulation in Wordpress (and elsewhere) using php -