Javascript 从modal调用AngularJS Promise会导致错误

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

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

错误：testLoginService.loginUser（…）未定义
$scope。ok@http：//localhost:8080/LoginModal/example.js:32:2
Parser.prototype.functionCall/您需要在服务中添加返回到$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方法中返回任何承诺
您需要在服务中向$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方法中返回任何承诺
请尝试以下操作

使用回调函数

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

    };

演示：
尝试以下操作

使用回调函数

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

    };

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

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

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

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

像这样改变你的服务电话

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:
像这样更改您的服务呼叫

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

普朗克：