javascript - 如何使用服务更改范围变量？

Question

我有一个应用程序，应用程序内部有一个注册和登录表单。

使用注册表单，当用户创建帐户时，他们会自动登录。

使用登录表单，用户也可以登录(显然)。

我有两个 Controller :一个用于注册表单，一个用于登录表单。我希望他们能够共享一项服务，“登录”，因为使用这两种形式，用户最终都会登录。

到目前为止，一切正常。我唯一的问题是登录表单会根据数据库异步检查用户的登录凭据，如果处理此请求的 PHP 脚本返回说不匹配，则 Angular 会更新错误消息的模型，如下所示给用户。当“logIn”服务不作为服务使用，而只是复制到两个 Controller 中时，这工作得很好。这是它在“SignupCtrl”中的样子:

.controller('SignupCtrl',['$scope','$http',function($scope,$http) {
    $scope.error = false;

    $scope.logIn = function() {
        var data = // user's login credentials

        $http({
            // send credentials to server, ask if there's a match
        })
        .success(function(data) {
            if(data.match === false) {
                $scope.error = true;
            } else {
                // start session, redirect to new page, etc.
            }
        })
    }
}]);

然后，在模板内部:

<div ng-show="error">Oops! That email/password doesn't exist.</div>

这很好用；但正如我所说，当“登录”功能用作服务时，情况并非如此。这是因为我无法弄清楚如何在服务中更新 $scope.error。

我试过使用 $rootScope(没用):

.service('logIn',[/* injections */, '$rootScope', function(/* injections */, $rootScope) {
    return function(email, password) {
        // all the same code as before

        if(data.match === false) {
            $rootScope.error = true; // this does nothing
        }
    }
}]);

// in the controller (the service is injected in as 'logIn')

$scope.logIn = logIn;

然后，在模板中:

<button ng-click="logIn(user.email, user.password)">Login</button>

用户可以使用该服务正常登录。问题只是用服务更新了 $scope.error 变量。

也许如果我能以某种方式做到这一点，它会起作用:

<button ng-click="logIn(user.email, user.password, $scope)">Login</button>

然后在服务中:

return function(email, password, scope) {
   // etc.
   if(data.match === false) {
       scope.error = true;
   }
}

有什么想法吗？谢谢。

小修改

澄清一下，根据我对服务的理解，它们似乎取代了通常声明全局函数的方式，或者只是模块内的整体函数以避免重复一个人的自己。示例:

(function() {
    function globalFunction() {
        //etc.
    }

    $('.thing').click(globalFunction);

    $('.otherThing').click(globalFunction);
}());

可能还有比这更好的例子，但我认为这个想法很清楚。

这个概念是否类似于在 Angular 中应该如何使用服务？如果没有，是否有更好的方法让我在不使用服务的情况下继续做我想做的事情？

Answer 1

您可以将 $rootScope 传递给服务，但污染您的 $rootScope 通常不是一个好主意，但是在这种特殊情况下您的问题是没有强制执行摘要，因此您的 Controller $scope 不知道更改。在您发布的代码中，如果您将 $rootScope.error 包装在 $rootScope.$apply() 中，一切都会正常进行。但是回调要简洁得多。

我建议您将回调传递给服务方法，并在回调中设置范围变量:

login:function(email,password,callback){
    $http({
            // send credentials to server, ask if there's a match
        })
        .success(function(data) {
         callback(data.match);
        })
}

在你的 Controller 中:

$scope.logIn = function() {
    loginServcie.login($scope.email,$scope.password,function(dataIsMatched){
   //you now have the result of call, and dataIsMatched is true or false
    $scope.error = !dataIsMatched;
})
}