AngularJS Promise从模态调用导致错误

Question

我目前正在尝试在AngularJS中创建某种模式对话框来登录用户。因此我使用官方ui-bootstrap页面上的模板创建了一个小例子。为了验证用户，证书被发送到REST服务。为了简单起见，我使用了一个虚拟来模拟http调用。接收到的数据应该回传给呼吁模态对话框，但不知何故我prmisehandling doesn't工作控制器和我收到一个错误，下面的代码是错误的：

testLoginService.loginUser(user.name, user.pass) 
    .then(function (sessionId){ 
     user.session = sessionId; 
    }); 

这是发生在错误控制台：

Error: testLoginService.loginUser(...) is undefined 
$scope.ok@http://localhost:8080/LoginModal/example.js:32:2 
Parser.prototype.functionCall/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js:10567:15 
ngEventDirectives[directiveName]</<.compile/</</<@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js:18627:17 
$RootScopeProvider/this.$get</Scope.prototype.$eval@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js:12412:16 
$RootScopeProvider/this.$get</Scope.prototype.$apply@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js:12510:18 
ngEventDirectives[directiveName]</<.compile/</<@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js:18626:15 
createEventHandler/eventHandler/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js:2780:7 
forEach@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js:330:11 
createEventHandler/eventHandler@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js:2779:5 

Here是我在plunkr上的代码。什么导致我的代码中的错误，以及如何解决它？最后，我想处理从loginService收到的数据，并在用户界面上显示sessionID或其他用户特定数据。

在此先感谢

Answer 1

尝试以下的方法loginUser，

使用一个回调函数

testLoginService.loginUser(user.name, user.pass,function (data){ 
     user.session = data.id; 
    }); 

Ajax请求

this.loginUser = function(user, password,callback) 
{ 

    var wsUrl = "http://jsonplaceholder.typicode.com/posts"; 

    var soapRequest = { 
        title: user, 
        body: password, 
        userId: 1 
    } 

    var config = { 
       headers : { 

       } 
      } 

    $http.post(wsUrl, soapRequest, config) 
    .success(callback) 
    .error(function (data, status, header, config) { 
     alert(req.responseText + " " + status); 
    }) 

    }; 

演示：http://plnkr.co/edit/ucibA2X7s40BdxhOQ0K2?p=preview

Answer 2

您需要在控制器中添加回到$ http.post您的服务中，处理成功或错误事件： -

//service 

this.loginUser = function(user, password) 
    { 

     var wsUrl = "http://jsonplaceholder.typicode.com/posts"; 

     var soapRequest = { 
         title: user, 
         body: password, 
         userId: 1 
     } 

     var config = { 
        headers : { 

        } 
       } 

     return $http.post(wsUrl, soapRequest, config) 


     }; 

     //controller 
    testLoginService.loginUser(user.name, user.pass) 
    .success(function (response){ 
     user.session = response; 
    }); 

你没有返回里面的任何承诺服务

Answer 3

这是因为你没有返回的承诺。试试这个：

this.loginUser = function(user, password) 
{ 
    var q = $q.defer(); 
    var wsUrl = "http://jsonplaceholder.typicode.com/posts"; 

    var soapRequest = { 
        title: user, 
        body: password, 
        userId: 1 
    } 

    var config = { 
       headers : { 

       } 
      } 

    $http.post(wsUrl, soapRequest, config) 
    .success(function (data, status, headers, config) { 

     q.resolve(data.id); 
    }) 
    .error(function (data, status, header, config) { 
     alert(req.responseText + " " + status); 
     q.reject(); 
    }); 
    return q.promise; 
    }; 

Answer 4

改变你的服务电话这样。

this.loginUser = function(user, password) { 
    var wsUrl = "http://jsonplaceholder.typicode.com/posts"; 
    var soapRequest = { 
     title: user, 
     body: password, 
     userId: 1 
    }; 
    var httpConfig = { 
     method: "POST", 
     url: wsUrl, 
     data: soapRequest 
    }; 
    return $http(httpConfig); 
}; 

Plunker：http://plnkr.co/edit/pjv9dTWso2fSawIygfSZ?p=preview