Question

我想从控制器调用服务来登录用户。为了测试一般概念，此时的服务应该只返回带有一些模拟数据的JSON对象。

如果我按下登录按钮，我会收到如下错误消息：

Error: loginService.loginTest(...).then is not a function
$scope.login@http://localhost/Clickstar/app/controller/loginController.js:15:3
Wa.prototype.functionCall/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js:162:24
Mc[c]</<.compile/</</<@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js:178:390
zd/this.$get</h.prototype.$eval@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js:101:141
zd/this.$get</h.prototype.$apply@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js:101:418
Mc[c]</<.compile/</<@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js:178:370
Xc/c/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js:27:145
q@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js:7:378
Xc/c@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js:27:129
 angular.min.js:84:35

这是我的代码

login.html

<div>   

    <div>
      <form method="post" ng-submit="login()">
            <input name="username" type="text" ng-model="username" placeholder="username"><br>
            <input name="password" type="password" ng-model="password" placeholder="password"><br>
            <input type="submit" value="Login" class="center-button">
        </form>
    </div>

    <div ng-show="Login.success">
            Username: {{Login.loginUsername}} <br>
            Password: {{Login.loginPassword}} <br>
            UserID: {{Login.usernID}} <br>


    </div>  


</div>

loginService.js

app.service('loginService', function($http, $q) {


    this.loginTest = function(username, password)
    {

        var dummyData = {   "username" : username,
                            "password" : password,
                            "userID" : 007,
                            "loginStatus" : 1
        };

        return dummyData;

    };

    return this;

});

loginController.js

app.controller('loginController', function ($scope, loginService) {   

    var vm = this;
    vm.loginUsername = null;
    vm.loginPassword = null;
    vm.usernID = null;
    vm.success = null;


    $scope.login = function(){
        vm.loginUsername = $scope.username;
        vm.loginPassword = $scope.password;


        loginService.loginTest($scope.username, $scope.password)
        .then(function(dummyData){

            vm.loginUsername = dummyData.username;
            vm.loginPassword = dummyData.password;
            vm.usernID = dummyData.userID;

            if(dummyData.loginStatus == 1){
                vm.success = true;
            }
            else{
                vm.success = false;
            }
        })

    };
});

那么我的代码有什么问题，我该如何解决呢？

Answer 1

问题是你的模拟登录服务器没有返回你期望在你的控制器中的promise。

您可以通过执行以下操作来更改loginTest方法，而不是返回承诺：

return $q(function(resolve, reject) {
  resolve(dummyData);
});

我想指出您的登录服务正在返回用户名和密码，这似乎是不必要的，您应该向服务器发出请求，通知您用户名/密码是否有效。您可以按如下方式模拟执行此操作的服务：

app.service('loginService', function($http, $q) {

  var dummyData = {
    "username": username,
    "password": password,
    "userID": 007,
    "loginStatus": 1
  };

  this.loginTest = function(username, password) {
    return $q(function(resolve, reject) {
      if (username === dummyData.username && password === dummyData.password) {
        resolve({
          userId: dummyData.userID,
          loginStatus: dummyData.loginStatus
        });
      } else {
        reject("Incorrect username or password");
      }
    });
  };

  return this;

});

注意 - 如果没有es6支持

如果要将此部署到不支持ES6的浏览器，则需要使用deferred API。

var deferred = $q.defer();
deferred.resolve(someData);
return deferred.promise;

是

的同义词

return $q(function(resolve, reject) { resolve(someData); }

Answer 2

您正在返回JSON对象，因为它需要来自loginService的{{3}}。

将代码loginTest更改为

app.service('loginService', function($http, $q) {
    this.loginTest = function(username, password) {
        var dummyData = {
            "username": username,
            "password": password,
            "userID": 007,
            "loginStatus": 1
        };

        var deferred = $q.defer();
        deferred.resolve(dummyData);
        return deferred.promise;
    };
    return this;
});

Answer 3

您尚未将控制器与表单相关联。表格标签应为
<form method="post" ng-submit="login()" ng-controller="loginController">
或者，您也可以将控制器与包含表单的div标签相关联。
请参阅AngularJS文档here

来自控制器的AngularJS服务调用不起作用

3 个答案:

注意 - 如果没有es6支持