はAngularJSを使用して変数を更新できません

Question

私はAngularJSを初めて使用しており、.foreachループを使用してhttpリクエストを送信しようとしています。ここで私は、コンソール2を組み合わせ、「res.data.title」と表示されます期待されていた私のコード

app.controller('myCtrl', function($scope, $http) { 
var rd; 
$http.get(furl,config).then(function mySucces(response) { 
rd = response.data; 
var webcontent = ""; 
angular.forEach(rd, function(rd1){ 
    $http.get(furl1 + rd1.slug,config).then(function(res){   
    webcontent += res.data.title; 
    console.log(webcontent);//console 1 
    }); 
}); 
console.log(webcontent);//console 2 
$scope.myWelcome = webcontent; 
}, function myError(response) {$scope.myWelcome = response.statusText;});}); 

だ、しかし、それだけで初期値を示しています。（この場合は空になっています）。コンソールログ1が正しく表示されています - 増加する "webcontent"変数を一覧表示します。 "webcontent"（コンソール2）の更新値を保持する方法がわかりません。どんな反応もありがとう！ありがとう！

Answer 1

これは角度の問題ではありませんが、これは非同期のjavascriptの問題です。約束が完了する前にコードが終了しました。あなたはそうのように、解決するために、すべての約束を待つために、クエリライブラリを使用することができます

app.controller('myCtrl', function($scope, $http, $q) { 
    var rd; 
    $http.get(furl, config).then(function mySucces(response) { 
     rd = response.data; 
     var webcontent = ""; 
     var promises = []; 

     angular.forEach(rd, function(rd1) { 
      promises.push($http.get(furl1 + rd1.slug, config); 
     }); 

     $q.all(promises).then(function (results) { 
      angular.forEach(results, function (result) { 
       webcontent += result.data.title; 
      } 

      $scope.myWelcome = webcontent; 
     }); 
    }, function myError(response) { 
     $scope.myWelcome = response.statusText; 
    }); 
}); 

Answer 2

あなただけの完全WebContentの変数を削除し、それの場所に直接$scope.myWelcome変数を更新し、それがその後、動作するはずでした。だから、：

​​3210

Answer 3

Ajaxはを呼び出しますが、彼らは似たようなwindow.setTimeoutしている、常に非同期タスクです。コードタスクをタスクごとに書くことは不可能です。見て：

console.log(1); 
 
window.setTimeout(console.log.bind(console, 2)); 
 
console.log(3);

非同期タスクが（将来的に）、その後のイベントループ内で実行されているので、これが起こります。 Ajaxの呼び出しは非同期であり、あなたは何をやっていることができないので

$http 
 
    .get(furl, config) 
 
    .then(function(response) { return response.data; }) 
 
    .then(function(resources) { 
 
    return $q.all(resources.map(function(resource) { 
 
     return $http.get(furl1 + resource.slug, config); 
 
    })); 
 
    }) 
 
    .then(function(results) { 
 
    return results.map(function(result) { 
 
     return result.data.title; 
 
    }).join(''); 
 
    }) 
 
    .catch(function(response) { 
 
    return response.statusText; 
 
    }) 
 
    .then(function(greetings) { 
 
    $scope.myWelcome = greetings; 
 
    }) 
 
;