Angularjsスコープオブジェクトが空白なのはなぜですか？

Question

私のコントローラは、次のコードがあります。

app.controller("weeklyLogViewer", function ($scope, $http){ 
$scope.allLogs = {}; 

$http({ 
    method: 'POST', 
    url: '../Utilities/WeeklyLog.php', 
    data: $scope.dateSelected, 
    headers: {'Content-Type': 'application/x-www-form-urlencoded'} 
}).then(function successCallback(response) 
{ 
    $scope.allLogs = response.data; 
}); 

console.log($scope.allLogs);}); 

をしかし、私はコンソールに$scope.allLogsを書くときには、空のオブジェクトを示しますが、私はconsole.log($scope);を行うとallLogs配列を表示したとき、私はデータを見ることができます。

response.dataは次のとおりです。

[ 
{"id" : 001, "name" : "name", "age" : 20}, 
{"id" : 002, "name" : "name", "age" : 21}, 
{"id" : 003, "name" : "name", "age" : 22}, 
{"id" : 004, "name" : "name", "age" : 23} 
] 

私が間違って何をしているのですか？

Answer 1

$ scope.allLogsオブジェクトで値が割り当てられる前にconsole.log（）が実行されているためです。 then（）;の内部にログインしようとする。 これは内部的にajax呼び出しである$ httpの非同期動作が原因で起こります。

Answer 2

非同期の$ http呼び出しの外にconsole.logを配置しました。したがって、コンソールに書き込むときには、サーバーから非同期の応答が戻ってきていないので、ログに空のオブジェクトが書き込まれます。以下のように$ http successコールバックのconsole.logを移動します。

app.controller("weeklyLogViewer", function ($scope, $http){ 
$scope.allLogs = {}; 
$http({ 
    method: 'POST', 
    url: '../Utilities/WeeklyLog.php', 
    data: $scope.dateSelected, 
    headers: {'Content-Type': 'application/x-www-form-urlencoded'} 
}).then(function successCallback(response) 
{ 
    $scope.allLogs = response.data; 
    console.log($scope.allLogs);}); 
});