$ httpサービスでJSONオブジェクトを返すPOST要求応答ですが、コントローラで呼び出されたときには定義されていません

Question

AngularJSの$ httpサービスを介してRESTメソッド呼び出しを行う機能を持つサービスがかなりあります。これらのメソッドは、コントローラ内でアクセスされ呼び出されます。

コントローラを介してメソッドが呼び出されると、サービスのコンソールに出力されるデータは、JSONオブジェクトと同じです。しかし、その関数がそれをコントローラに返すと、それは未定義になります。

私はこの理由が分かりませんし、なぜこれが起こっているのかについてのいくつかの洞察が大好きです。スコープやガベージコレクションと関係がありますか？

ありがとうございます！

そこでここではサービス「ハブ」

this.getAllHubs = function() { 
    $http({ 
     method: 'GET', 
     url: 'https://****.com', 
    }).then(function successCallback(response) { 
     console.log('In hub.js ' + JSON.stringify(response.data)); 
     this.hubs = response.data; 
     return response.data; 
    }, function errorCallback(response) { 
     // Error response right here 
    }); 
    }; 

だから、最初に期待されるコンソール出力プリントなどのオブジェクトが正しく

そして、ここであなたが返されませんでしたコントローラー・コード

app.controller('HubCtrl', HubCtrl); 

HubCtrl.$inject = ['$scope','hub']; 

function HubCtrl($scope,hub) { 
    $scope.hubs = hub.getAllHubs(); 
    console.log('In ctrl ' + $scope.hubs); 

    $scope.addHub = function(_hub) { 
    console.log('In Ctrl ' + _hub); 
    hub.addHub(_hub); 
    }; 
} 

Answer 1

です関数this.getAllHubsからのデータ。

this.getAllHubs = function() { 
    return $http({    // Put a return here 
     method: 'GET', 
     url: 'https://****.com', 
    }).then(function successCallback(response) { 
     console.log('In hub.js ' + JSON.stringify(response.data)); 
     this.hubs = response.data; 
     return response.data; 
    }, function errorCallback(response) { 
     // Error response right here 
    }); 
    }; 

と戻り値が実際に$q Promiseあるので、それは約束の値を使用して、十分ではありません。

function HubCtrl($scope,hub) { 
    // getAllHubs() now returns a promise 
    var hubsPromise = hub.getAllHubs(); 

    // We have to '.then' it to use its resolved value, note that this is asynchronous! 
    hubsPromise.then(function(hubs){ 
    $scope.hubs = hubs; 
    console.log('In ctrl ' + $scope.hubs); 
    }); 

    $scope.addHub = function(_hub) { 
    console.log('In Ctrl ' + _hub); 
    hub.addHub(_hub); 
    }; 
}