digest loop walkthrough All Versions

Examples

• 2

  $apply and $digest dirtyness

  edit move example delete share 2

  Improvements requested by fracz, charlietfl:

  • This example does not sufficiently illustrate the point and needs to be edited to provide more details. - jul 24 at 18:12

    Comments:

    • Nothing shown in example would ever merit use of `$apply` - charlietfl
  • This example is not helpful and should be edited or deleted. - jul 28 at 6:58

  Edit Example Delete Example

  2

  Sometimes running the children's $digest is not enough:

  <div>
      {{person.name}}
      <span ng-repeat="number in [1,2,3,4,5]"><input ng-model="person.name" /></span>
  </div>
  

  There are two problems with the current scope

  • User interaction inside span needs to update its parents
  • Some digest loop callbacks could create changes which wont be updated in the DOM until another digest loop starts

  ---

  Solving the first problem is done by keeping a reference to the root scope, and on user interaction - calling $digest of the $rootScope. That is what the $apply function dose:

  //create new child scope
  $scope.prototype.$new = function(){
      var nScope = new $scope();
      nScope.parent = this;
      nScope.$root = this.$root || this;
      this.$children.push(nScope);
      return nScope;
  }
  
  $scope.prototype.$apply = function(){
      this.$root.$digest();
  }
  

  ---

  The second problem is solved by keeping track of the scope drityness after each digest loop

  created Jul 23 at 20:32

  
• 2

  $digest and $watch

  edit move example delete share

  2

  Implementing two-way-data-binding, to achieve the result from the previous example, could be done with two core functions:

  • $digest is called after a user interaction (binding DOM=>variable)
  • $watch sets a callback to be called after variable changes (binding variable=>DOM)

  note: this is example is a demonstration, not the actual angular code

  ---

  <input id="input"/>
  <span id="span"></span>
  

  The two functions we need:

  var $watches = [];
  function $digest(){
      $watches.forEach(function($w){
          var val = $w.val();
          if($w.prevVal !== val){
              $w.callback(val, $w.prevVal);
            $w.prevVal = val;
          }
      })
  }
  function $watch(val, callback){
      $watches.push({val:val, callback:callback, prevVal: val() })
  }
  

  Now we could now use these functions to hook up a variable to the DOM (angular comes with built-in directives which will do this for you):

  var realVar;    
  //this is usually done by ng-model directive
  input1.addEventListener('keyup',function(e){
      realVar=e.target.value; 
      $digest()
  }, true);
  
  //this is usually done with {{expressions}} or ng-bind directive
  $watch(function(){return realVar},function(val){
      span1.innerHTML = val;
  });
  

  Off-course, the real implementations are more complex, and support parameters such as which element to bind to, and what variable to use

  A running example could be found here: https://jsfiddle.net/azofxd4j/

  created Jul 23 at 20:32

  
• 2

  the $scope tree

  edit move example delete share

  2

  The previous example is good enough when wee need to bind a single html element, to a single variable.

  In reality - we need to bind many elements to many variables:

  <span ng-repeat="number in [1,2,3,4,5]">{{number}}</span>
  

  This ng-repeat binds 5 elements to 5 variables called number, with a different value for each of them!

  ---

  The way angular achieves this behavior, is using a separate context for each element which needs separate variables. This context is called a scope.

  Each scope contains properties, which are the variables bound to the DOM, and the $digest and $watch functions are implemented as methods of the scope.

  The DOM is a tree, and variables need to be used in different levels of the tree:

  <div>
      <input ng-model="person.name" />
      <span ng-repeat="number in [1,2,3,4,5]">{{number}} {{person.name}}</span>
  </div>
  

  But as we saw, the context(or scope) of variables inside ng-repeate is difrrent then the context above it. To solve this - angular implements scopes as a tree.

  Each scope, has an array of children, and calling its $digest method will run all of its children's $digest method.

  This way - after changing the input - $digest is called for the div's scope, which then runs the $digest for its 5 children - witch will updates their contents

  ---

  A simple implementation for a scope, could look like this:

  function $scope(){
      this.$children = [];
      this.$watches = [];
  }
  
  $scope.prototype.$digest = function(){
      this.$watches.forEach(function($w){
          var val = $w.val();
          if($w.prevVal !== val){
              $w.callback(val, $w.prevVal);
            $w.prevVal = val;
          }
      });
      this.$children.forEach(function(c){
          c.$digest();
      });
  }
  
  $scope.prototype.$watch = function(val, callback){
      this.$watches.push({val:val, callback:callback, prevVal: val() })
  }
  

  note: this is example is a demonstration, not the actual angular code

  created Jul 23 at 20:32

  
• 0

  two way data binding

  edit move example delete share

  0

  Angular has some magic under its hood. it enables binding DOM to real js variables.

  Angular uses a loop, named the "digest loop", which is called after any change of a variable - calling callbacks which update the DOM.

  For example, the ng-model directive attaches a keyup eventListener to this input:

  <input ng-model="variable" />
  

  Every time the keyup event fires, the digest loop starts.

  At some point, the digest loop iterates over a callback which updates the contents of this span:

  <span>{{variable}}</span>
  

  The basic life-cycle of this example, summarizes (very Schematically) how angular works::

  1. Angular scans html
     • ng-model directive creates a keyup listener on input
     • expression inside span adds a callback to digest cycle
  2. User interacts with input
     • keyup listener starts digest cycle
     • digest cycle calles the callback
     • Callback updates span's contents

  created Jul 23 at 20:32