Forward Advance Learning

Watch and the $digest cycle

We can watch an attribute of $scope using:

$scope.$watch('test', function(newVal, oldVal) {});

Now whenever the value of $scope.test changes the function will be called.

Watchers and the digest cycle

Watchers are added to the $scope.$$watchers array. This array contains a list of all current watchers, the expression they are evaluating and the last known value of that expression.

Whenever an Angular watcher fires it triggers something called a $scope digest. This means that the $scope tree is traversed and all the watch expressions are evaluated. If any come up 'dirty' i.e. changed the corresponding functions are executed.

Digest limit

The digest cycle will repeat over and over until the entire $scope hierarchy is clean or the digest limit is reached. The default digest limit is 10.

Exercise

We are going to hack some quick validation into our profile form. We'll see the right way to do validation using directives in a bit.

Extend your profile form with a $scope.person.name field. Let's make name mandatory. use $scope.$watch to watch the 'person.name' property of scope.

If the value is not blank, set $scope.errors = {}.

Otherwise set $scope.errors = {name: "should not be blank."}.

Now in your template, use ng-show to show a nice warning message if errors != false.