build_your_own_angularjs_sample

Build Your Own Angular Chapter 1. Scopes And Digest
want to prevent unnecessary rendering: Why let the browser render DOM changes that are
going to be immediately overridden anyway
Here’s the contract of $evalAsync expressed as a unit test:
test/scope_spec.js
it("executes $evalAsynced function later in the same cycle", function() {
scope.aValue = [1, 2, 3];
scope.asyncEvaluated = false;
scope.asyncEvaluatedImmediately = false;
});
scope.$watch(
function(scope) { return scope.aValue; },
function(newValue, oldValue, scope) {
scope.$evalAsync(function(scope) {
scope.asyncEvaluated = true;
});
scope.asyncEvaluatedImmediately = scope.asyncEvaluated;
}
);
scope.$digest();
expect(scope.asyncEvaluated).toBe(true);
expect(scope.asyncEvaluatedImmediately).toBe(false);
We call $evalAsync in the watcher’s listener function, and then check that the function
was executed during the same digest, but after the listener function had finished executing.
The first thing we need is a way to store the $evalAsync jobs that have been scheduled.
We can do this with an array, which we initialize in the Scope constructor:
src/scope.js
function Scope() {
this.$$watchers = [];
this.$$lastDirtyWatch = null;
this.$$asyncQueue = [];
}
Let’s next define $evalAsync, so that it adds the function to execute on this queue:
src/scope.js
Scope.prototype.$evalAsync = function(expr) {
this.$$asyncQueue.push({scope: this, expression: expr});
};
28 ©2014 Tero Parviainen Errata / Submit