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やその他のユーザー固有データをユーザーインターフェイスに表示したいと考えています。

あなたはあなたのサービス内の$ http.postに復帰を追加し、コントローラでの成功またはエラーイベントを処理する必要があり、事前

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

のおかげでは： -

//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