$scope.$watch 无法正常工作

Question

我有一个需要一系列错误的登录表格。事实上，这个登录表单通过自定义指令从左侧滑入。当我想将它滑出视线时，我需要当前错误消失。我已经设置了一个 $watch 函数来监视 sharedInfo.getError() 服务函数中的变化，但它仅在控制器加载然后停止侦听变化时运行。我似乎无法让它工作，我以前没有任何困难地使用过它。我可以使用一些帮助来追踪故障。

控制器：

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;
                }
            });
        }
    }
}]);

跟踪控制器之间任何共享信息的服务：

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;
        }
    }
}]);

执行幻灯片的指令：

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

您必须return您正在观看的内容的价值才能有效地观看它

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

或

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

Answer 2

另一种选择是将 sharedInfo 放入范围。

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

$scope.$watch 无法正常工作

$scope.$watch not working properly

javascript

angularjs

watch