Update: well, you learn something new every day... just remove the ()
to watch the results of a function:
$scope.$watch(Auth.isAuthenticated, function() { ... });
Updated fiddle
In this fiddle, notice how 'watch1' and 'watch3' both trigger a second time when the value of $scope.isAuthenticated
changes.
So, this is the general technique to watch for changes to a primitive value that is defined on a service:
- define an API/method that returns (the value of) the primitive
- $watch that method
To watch for changes to an object or array that is defined on a service:
- define an API/method that returns (a reference to) the object/array
- In the service, be careful to only modify the object/array, don't reassign it.
E.g., don't do this: user = ...;
Rather, do this: angular.copy(newInfo, user)
or this: user.email = ...
- normally you'll assign a local $scope property the result of that method, hence the $scope property will be a reference to the actual object/array
- $watch the scope property
Example:
$scope.user = Auth.getUser();
// Because user is a reference to an object, if you change the object
// in the service (i.e., you do not reassign it), $scope.user will
// likewise change.
$scope.$watch('user', function(newValue) { ... }, true);
// Above, the 3rd parameter to $watch is set to 'true' to compare
// equality rather than reference. If you are using Angular 1.2+
// use $watchCollection() instead:
$scope.$watchCollection('user', function(newValue) { ... });
Original answer:
To watch the results of a function, you need to pass $watch a function that wraps that function:
$scope.$watch( function() { return Auth.isAuthenticated() }, function() { ... });
Fiddle. In the fiddle, notice how only 'watch3' triggers a second time when the value of $scope.isAuthenticated
changes. (They all trigger initially, as part of $watch initialization.)
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…