AngularJSが$ httpから未定義になっています

Question

私は現在、AngularJSプロジェクトを少し進めています。

私のサービスでこのコードを取得しました。

testApp.service('testService',['databaseService', 'loggedService', '$http', function(databaseService, loggedService, $http){ 

    this.getDetails= function(name){ 

     $http({ 
      method : "GET", 
      url : "url"  
     }).then(function mySucces(response) { 
      return response.data; 
     }, function myError(response) { 
      $scope.myWelcome = response.statusText; 
     }); 

    }; 

}]); 

私は、コントローラの私のサービスからメソッドを呼び出しています：

testApp.controller('mainController', ['$scope', '$http', 'testService', function($scope, $http, testService){ 

    $scope.details; 

    $scope.loadDetails= function(val){ 
     $scope.details= testService.getDetails(val); 
     console.log($scope.details); 
     console.log(val); 
    }; 

}]); 

ユーザーが検索フィールドに何かを入力しているとき、$ scope.loadDetailsが私の見解で呼び出されています。したがって、ドロップダウンを自動更新する必要があります。

サービスのresponse.dataは配列を返します。 しかし、コントローラの$ scope.detailsは未定義のままです。誰でもサービスからコントローラにresponse.dataを返す方法を知っていますか？

$ httpの外でresponse.dataを返そうとしましたが、コントローラで未定義のままです。

Answer 1

$ http経由の通信は非同期であり、約束通りに動作します。 $httpの呼び出しは約束を返し、.thenの呼び出しは約束を返します。 return response.dataを追加すると、結果の約束はデータの配列で解決されます。あなたはreturnの約束をgetDetails機能からも必要とするので、return $http(...を追加してください。

コントローラで、testService.getDetails()に電話すると、約束が得られます。それは結果そのものではないので、返された値をスコープに割り当てることに意味はありません。その代わりに、$scopeに値を代入するコールバック関数を使用して、その約束の上に別の.thenを呼び出す必要があります。サービスで

：コントローラで

this.getDetails= function(name){ 

    return $http({ 
     method : "GET", 
     url : "url"  
    }).then(function (response) { 
     return response.data; 
    }); 

}; 

：

$scope.loadDetails= function(val) { 
    testService.getDetails(val).then(function(data) { 
     $scope.details = data; 
    });   
}; 

Answer 2

あなたは約束を間違った方法で処理しています。この行は、detailsService.getDetailsの$scope.detailsに戻り値を割り当てます。現在detailsService.getDetailsは何も返していないので、undefinedとなります。

return $http({ 
    method : "GET", 
    url : "url"  
})` 

あなたは$http約束を返している：あなたがサービスのレスポンスを処理しなければならない場合、あなたのような何かを行うことができます。