从模态调用的AngularJS Promise会导致错误答案

【问题标题】：AngularJS Promise called from modal causes error从模态调用的AngularJS Promise会导致错误
【发布时间】：2016-08-03 09:23:56
【问题描述】：

我目前正在尝试在 AngularJS 中创建某种模式对话框来登录用户。因此，我使用官方ui-bootstrap 页面上的模板创建了一个小示例。为了对用户进行身份验证，凭据被发送到 REST 服务。为了简单起见，我使用了一个假人来模拟一个 http 调用。收到的数据应该传回调用模态对话框的控制器，但不知何故我的prmisehandling不起作用，我收到以下代码错误的错误：

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 或其他用户特定的数据。

提前致谢

【问题讨论】：

标签： javascript jquery angularjs angular-ui-bootstrap bootstrap-modal

【解决方案1】：

尝试以下方法，

使用回调函数

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

【讨论】：

【解决方案2】：

像这样更改您的服务调用。

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

【讨论】：

【解决方案3】：

您需要在您的服务中添加返回到 $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;  
    });

您没有在服务的 loginUser 方法中返回任何承诺

【讨论】：

【解决方案4】：

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

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

【讨论】：