$ http AJAXコールの後にスコープが更新されない

Question

次のコードはコントローラにあります。console.log（）行に到達しても何も表示されません。 AJAX呼び出しは有効な配列を返します。

var mmyApp = angular.module('myApp',['ui.bootstrap']).controller('TasksController', TasksController); 
function TasksController($scope, $http) { 
$scope.transactions = []; 
$http.get('transactions').then(function (response) { 
      $scope.transactions = response.data;  
    }, function (error) { 
     throw error; 
    }); 
console.log($scope.transactions); 
} 

Answer 1

$http.getは非同期です：。$ HTTPを使用すると、自動的にダイジェスト・サイクルを開始しますので、私は仮定している、私は$適用$スコープを使用してみましたが、私は進行中のエラーですでにプロセスを得ました。 console.logに電話すると、GETリクエストはまだ返されませんでした。あなたはそれが動作することを確認するためにハンドル本体の内側に移動することができます

$http.get('transactions').then(function (response) { 
      $scope.transactions = response.data;  
      console.log($scope.transactions); 
    }, function (error) { 
     throw error; 
    }); 

Answer 2

あなたはAngularJSで$httpで作られたAJAX呼び出しが非同期であることを知っている必要があり、つまり、彼らは、コードの残りの部分と順番に実行されませんあなたがそのように設定しない限り。

したがって、console.logが実行されると、要求はまだ処理を完了していません。正しいことは、AJAX呼び出しで変数の割り当てをこのように実行した後にconsole.logを実行することです。

var mmyApp = angular.module('myApp',['ui.bootstrap']).controller('TasksController', TasksController); 
function TasksController($scope, $http) { 

    $scope.transactions = []; 

    $http.get('transactions').then(function (response) { 
     $scope.transactions = response.data; 
     console.log($scope.transactions);  
    }, function (error) { 
     throw error; 
}); 
}