Signaturen för $watch:

$watch(watchExpression, listener, [objectEquality]);
  • WatchExpression är antingen ett angular expression eller en anonym function() som returnerar ett värde,
  • Listener är en anonym function som exekveras när watchern triggas.
  • ObjectEquality är en boolean som sätter hur värdena ska jämföras. False som är default innebär by reference. Med True är det by value.

Ett av grundkoncepten i Angular är Digest cycle. Man kan säga att det är en loop som går igenom alla $scope:s watcher:s och kollar ifall det finns några förändringar på de variablar som övervakas. Exempel på vad som övervakas är när man anger något av dessa 3 sätt:

  • Har ett expression direkt i htmltemplate: ””
  • Via Ng-model=”name” på ett input element
  • Eller manuellt via $scope.watch

De första alternativen registreras automatiskt som watchers av angular. Om någon watcher’s triggas på grund av att något är förändrat så sätts watcherns listener igång .  Observera att så fort en watcher triggats så initieras en ny digest cycle. Detta sker ända tills inga flera förändringar hittas.

Båda watch:erna nedan utför samma sak.

var app = angular.module('myApp', []);

app.controller('TestController', ['$scope', function($scope) {
    $scope.name = "Hej";

    $scope.$watch('name', function(newValue, oldValue) {
        alert(1);
    });

    $scope.$watch(function() {
        return $scope.name;
    }, function(newValue, oldValue) {
        alert(2);
    });
}]);

Vad är då syftet med att registrera en manuell watch? I vissa fall vill man att en viss procedur ska köras när ett värde förändras. Då är detta ett enkelt sätt att göra detta.

Om du vill läsa mer om hur scopes och digest, eval och apply med mera fungerar i angular. Kolla in detta välskrivna blogginlägg som beskriver hur man bygger ett “eget” angular:

http://teropa.info/blog/2013/11/03/make-your-own-angular-part-1-scopes-and-digest.html