Types of data binding

• One way (model to view)
• Two-way data binding

From view to model

• Javascript DOM Event model: Event, KeyboardEvent, MouseEvent...
• Easy to bind model to view in Angular directives

app.directive('input', function () {
    return {
        restrict: 'E',
        scope: false,
        link: function (scope, element, attrs) {
            element.bind('input', function (event) {
                scope.$apply(function () {
                    scope.model = element.val();
                });
            });
        }
    };
});

From model to view

• No events or notifications fired when a value changes in EcmaScript 5
• Observers are for the future (EcmaScript 6)

Object.observe(myObj, function observer(changes) {
    /* Do something */
    changes.forEach(function (change) {
        console.log(change.name, change.type, change.oldValue);
    });
});

A way to overcome this: dirty checking

Watchers

// Object.observe(myObj, function observer(changes) {
//     changes.forEach(function (change) {
//         console.log(change.name, change.type, change.oldValue);
//     });
// });

$scope.$watch(watchExpression, function listener(newValue, oldValue) {
    // Do something
    console.log(newValue, oldValue);
});

• watchExpression can be an expression (string)It is evaluated in the context of the $scope using $parse
• Or it can be a function returning a value
• Watched values can be primitives, array or objects
• The listener function is executed if the watchExpression result has changed since the last check.
• $scope.$watch() returns a deregistration function

Watching depths

• $scope.$watch(watchExpr, listener) for watching primitives or object references 
• $scope.$watchCollection(watchExpr, listener) for watching additions and deletions in Arrays 
• $scope.$watch(watchExpr, listener, true) for objects and arrays equality (using angular.equals) 

Which directives add watchers?

• $watch: {{ }}, ngBind, ngBindTemplate, ngModel ngShow, ngHide, ngIf, ngSwitch ngSelected, ngChecked, ngDisabled, ngRequired, etc...
• $watchCollection: ngRepeat
• $watch with object equality: ngClass, ngStyle

The digest process

• $scope.$digest() digests a scope and its children
• Cannot run concurently
• Evaluates all watch expressions and functions
• If at least one listener is fired, it will re-evaluate all watch expressions
• The digest process stops when no more listeners have been fired
• Stops at 10 times and throws an infinite digest loop

What triggers a digest?

• $digest usually not called directly

  // Apply changes: execute function and call $digest
  $scope.$apply(function () {
      $scope.myModel = 'Hello';
  });
  

• Services: $http, $timeout, $interval
• Directives: ngClick, ngChange, ngFocus, ngPaste, etc...
• When inside a watch listener, no need to trigger a digest!

Issue #1: performance

• Dirty checking: 40ms
• Observers: 1-2ms

Issue #2: Sustainability

• The more the watchers, the more processing required
• The more processing, the more time it takes

Solution

• Limiting the number of watchers!

Scopes and data

• A variable can be available when the scope is instanciated: use of resolve, or synchronous initialisation
• A variable can be available after the scope is instanciated: fetching data asynchronously
• A variable can be changing multiple times during a scope's life

The three cases of watching data

• A watcher is watching...
• data available at scope creation which will never change
• data available after scope creation which will never change thereafter
• data available immediately or not, which will change once or more

Demo