How to watch a primitive service variable in controller with AngularJS?

Question

I'm trying to use $watch for it. The $watch body firing at page initialization (with undefined in newValue) and not firing at "btnChangeIsLoggedIn" click.

<!DOCTYPE html>
<html data-ng-app="myApp">
<head><title>title</title></head>
<body>
    <script src="lib/angular/angular.js"></script>

    <div ng-controller="ctrl1">
        <input type="text" ng-model="isLoggedIn" />
        <input type="button" id="btnChangeIsLoggedIn" 
            value="change logged in" ng-click="change()" />
    </div>

    <script>
        var myApp = angular.module('myApp', []);

        myApp.service('authService', function () {
            this.isLoggedIn = false;
        });

        myApp.controller('ctrl1', function ($scope, authService) {
            $scope.isLoggedIn = authService.isLoggedIn;

            $scope.$watch("authService.isLoggedIn", function (newValue) {
                alert("isLoggedIn changed to " + newValue);
            }, true);

            $scope.change = function() {
                authService.isLoggedIn = true;
            };
        });
    </script>
</body>
</html>

What I'm doing wrong?

My code at JSFiddle: http://jsfiddle.net/googman/RA2j7/

TheSharpieOne · Accepted Answer · 2014-01-13 19:55:16Z

20

You can pass a function that will return the value of the Service's method. Angular will then compare it to the previous value.

$scope.$watch(function(){
    return authService.isLoggedIn;
}, function (newValue) {
    alert("isLoggedIn changed to " + newValue);
});

Demo: http://jsfiddle.net/TheSharpieOne/RA2j7/2/

Note: the reason the text field value doesn't update is because the button only changes the service's value, not the $scope's You can also get rid of that initial alert (running of the change function) but comparing the newValue to the oldValue and only executing the statements if they are different.

answered Jan 13, 2014 at 19:55

TheSharpieOne

25.7k9 gold badges71 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Googman Over a year ago

Thank you! Am I right that if I want to change the text field then I should do something like this:

$scope.$watch(function(){ return authService.isLoggedIn; }, function (newValue, oldValue) {         if (newValue == oldValue) return;         $scope.isLoggedIn = newValue;         alert("isLoggedIn changed from " + oldValue + " to " + newValue);     }, true);

(jsfiddle.net/googman/RA2j7/5)

Eric Soyke Over a year ago

Thank you! It was killing me why my $watch on a true/false val was always returning undefined. I've used $watch on service variables before, but this was the first time with a boolean type and not a JSON object.

Collectives™ on Stack Overflow

How to watch a primitive service variable in controller with AngularJS?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related