$ scope。$ watch无法正常工作

Question

I've got a sign in form which requires a set of errors. Thing is, this sign in form slides in from the left via a custom directive. When I want to slide it out of sight I need the current error to disappear. I've set a $watch function to watch for changes in the sharedInfo.getError() service function but it only runs when the controller loads and then stops listening for changes. I can't seem to get this to work, I've used it like this before without any difficulties. I could use some assistance in tracking down the malfunction.

The controller:

forumApp.controller('signinCtrl', ['$scope', 'fbRef', 'validation', 'userLogic', 'sharedInfo', function($scope, fbRef, validation, userLogic, sharedInfo) {

    $scope.$watch('sharedInfo.getError()', function(newValue, oldValue) {
        console.log(oldValue);
        console.log(newValue);
        $scope.error = newValue;
    });

    $scope.user = {
        email: '',
        password: ''
    }

    $scope.validate = function() {

        $scope.error = validation.validateSignin($scope.user, $scope.error);

        if ($scope.error) {
            return false;
        }
        else {
            userLogic.signinUser($scope.user).then(function(authData) {
                sharedInfo.setAuthState(authData);
            }).catch(function(error) {

                switch (error.code) {

                    case 'INVALID_USER': 
                        $scope.error = 'Invalid email';
                        sharedInfo.setError($scope.error);
                        break;

                    case 'INVALID_EMAIL': 
                        $scope.error = 'Invalid email format';
                        sharedInfo.setError($scope.error);
                        break;    

                    case 'INVALID_PASSWORD': 
                        $scope.error = 'Invalid password';
                        sharedInfo.setError($scope.error);
                        break;
                }
            });
        }
    }
}]);

The service which keeps track of any shared info across the controllers:

forumApp.service('sharedInfo', [function() {

    var authState;
    var error;

    return {
        getAuthState: function() {
            return authState;
        },
        setAuthState: function(authData) {
            authState = authData;
        },
        getError: function() {
            return error;
        },
        setError: function(newError) {
            error = newError;
        }
    }
}]);

The directive which performs the slide:

forumApp.directive('mySigninSlide', ['sharedInfo', function(sharedInfo) {
    return {
        restrict: 'A',
        link: function($scope, element, attrs) {

            element.on('click', function() {

                var sidebar = $('#signin-wrapper');

                if ($scope.isAnimated === undefined || 
                    $scope.isAnimated === false) {

                    sidebar.stop().animate({left: '340px'});
                    $scope.isAnimated = true;
                }
                else {
                    sidebar.stop().animate({left: '-606px'});
                    $scope.isAnimated = false;
                    sharedInfo.setError('');
                }
            });
        }
    };
}]);

Answer 1

You have to return the value of what you are watching to be effectively watching it

$scope.$watch(sharedInfo.getError(), function(newValue, oldValue) {
        console.log(oldValue);
        console.log(newValue);
        $scope.error = newValue;
    });

or

$scope.$watch(function () { return sharedInfo.getError(); }, 
  function(newValue, oldValue) {
    console.log(oldValue);
    console.log(newValue);
    $scope.error = newValue;
});

Answer 2

Another option would be to put sharedInfo onto the scope.

$scope.sharedInfo = sharedInfo;
$scope.$watch('sharedInfo.getError()', function(newValue, oldValue) {
  ...
});