Question

我无法使用服务对外部API进行身份验证，并以相同的表单提交注册更新的服务数据。我很确定这是一个范围问题，但我对角度很新，并且不确定如何在控制器中正确调整范围。

我定义了以下身份验证服务：

angular.module('myapp.services', []).
  factory('AuthService', ['$http', function($http){
    var currentUser;
    var isLoggedIn = false;

    return {
      login: function(user, pass) {
        $http({method: 'GET', url:'https://some-api/api/login/'+user+'/'+pass}).
          success(function(data){
            currentUser = data;
            isLoggedIn = true;
          });
      },
      isLoggedIn: function(){ return isLoggedIn; },
      currentUser: function(){ return currentUser; }
    };
  }]);

然后我在一个绑定到“user”的视图中有一个基本表单，然后在我的控制器中：

angular.module('myapp.controllers', [])
  .controller('LoginCtrl', ['$scope', 'AuthService', function(scope, AuthService) {
    scope.update = function(user){
      AuthService.login(user.username, user.password);
      console.log(AuthService.currentUser());
    };
  }]);

在第一次提交时，我在控制台中得到“未定义”，在第二次提交时，我随后在控制台中看到了预期的数据...我一直在阅读关于返回一个承诺和诸如此类的东西，只是有点不清楚根据我的代码结构精确实现...

Answer 1

看起来您正在尝试在xhr请求完成之前记录用户。试试这个：

angular.module('myapp.services', []).
factory('AuthService', ['$q', '$http', function($q, $http){
  var currentUser;
  var isLoggedIn = false;

  return {
    login: function(user, pass) {
      var deferred = $q.defer();
      $http({method: 'GET', url:'https://some-api/api/login/'+user+'/'+pass}).
        success(function(data){
          currentUser = data;
          isLoggedIn = true;
          deferred.resolve();
        });
      return deferred.promise;
    },
    isLoggedIn: function(){ return isLoggedIn; },
    currentUser: function(){ return currentUser; }
  };
}]);

然后

angular.module('myapp.controllers', [])
.controller('LoginCtrl', ['$scope', 'AuthService', function(scope, AuthService) {
  scope.update = function(user){
    AuthService.login(user.username, user.password).then(function() {
      console.log(AuthService.currentUser());
    });

  };
}]);

angularjs基于xhr的服务更新

1 个答案: