There're 2 ways to watch a group of variables in Angular. But what's the difference between them?
They both seem to do shallow watches. Are there situations where one is obviously preferable over the other?
Join Stack Overflow to learn, share knowledge, and build your career.
There're 2 ways to watch a group of variables in Angular. But what's the difference between them?
They both seem to do shallow watches. Are there situations where one is obviously preferable over the other?
$watchCollection
will shallow watch the properties on a single object and notify you if one of them changes.
$watchGroup
however watches a group of individual watch expressions.
They are not functionally equivalent. $watchGroup
could be used when you want to watch a multitude of expressions that should all respond to the same callback - these could be individual expressions that target different objects. This could be used for watching 'foo'
, 'foo.bar'
, and 'baz.qux'
. These are 3 different targets - foo
, foo
's bar
property and baz
's qux
property, but they will all delegate to the same handler.
By contrast, $watchCollection
will only shallow watch a single object. This makes it better for an object that might change it's properties a lot (for example - our very own $scope
). In keeping with our rubbish name examples, to achieve the same as above you would only want to watch foo
and baz
, but you would be notified of any changes in foo
and baz
(as opposed to just being notified for the changes on foo
itself, foo.bar
and baz.qux
.
Here's an example of where you'd use each one.
$scope.data = ['Abc', 'Bcd', 'Cde', 'Def'];
$scope.$watchCollection('data', function(){...});
// responds to changes within $scope.data
// The following line will trigger the watch function:
$scope.data[0] = 'FOO';
-
$scope.data = ['Abc', 'Bcd', 'Cde', 'Def'];
$scope.$watchGroup('data', function(){...});
// responds to changes on the properties (or functions, etc.)
// Any angular expression can be used in $scope.data
// The following line will trigger the watch function:
$scope.Abc = 'FOO';