チェック非同期の値は、私はURLで取る入力の形を持っている私のページで

Question

を呼び出し

<div ng-repeat="parent in parents"> 
    <input ng-model="parent.url" type="text" /> 
</div> 
<button ng-click="addParent()"> Add new link </button> 

後、私はNGクリック私の中の関数を呼び出すと、ボタンを持っています（非同期に）、これらのURLのページが存在する場合は、他の（同期）のチェックがあるかどうかをチェックします。

どういうわけか、結果が処理されるのを待って、それらを収集し、その結果に応じていくつかのコンテンツを表示する必要があります。私は、各URLのためのすべての$ HTTP通話を超えるループ試してみました：

var results = []; 
for (let i = 0; i < parents.length; i++) { 
    let p = parents[i]; 
    $http.get(p.url). 
    then((res) => { // pages exists 
    results.push(true); 
    }, (err) => { // page doesn't exist 
    results.push(false); 
    }); 
} 

をしかし、$ HTTP呼び出しは非同期であるため、これは、空のリストを返します。その後、私は本当にこのような私の結果のすべてをチェックすることはできません。

if(sync_values){ // this is fine 
    if(async_values){ // this is never filled in 
    // do something 
    } 
} 

私はすべて$ HTTP呼び出しの後に私の結果を確認することができますどのように？

---

UPDATE：私は約束を収集し、それらを解決します$q.all()と工場を実装しようとしてい

。トリッキーなビットは、約束をするのではなく、価値を解決することでした。私はどのページが存在し、どれが欠けていたのかを知る必要がありました。

let deferred = $q.defer(); 
let promises = []; 
angular.forEach(parents, function(parent) { 
    promises.push($http.get(parent.url).then((res) => { 
    return true; 
    }, (err) => { 
    return false; 
    })); 
}); 

$q.all(promises). 
then((res) => { 
    deferred.resolve(res); 
}); 
return deferred.promise; 

は、今私はブール値のリストを返します（と私はしていないページが存在している知っているとする）：だから私は、私の工場のために次のコードを思い付くことができました。

Answer 1

あなたは$qを使用する必要があります。

angular.module('app', []) 
 
.controller('ctrl', ['$q', '$scope', '$http', function($q, $scope, $http){ 
 

 
    $scope.handler = function(){    
 
    $scope.results = []; 
 
    $scope.loaded = false; 
 
    $scope.parents = [1,2,3,4,5,6,7,8,9,10]; 
 
    var promises = []; 
 

 
    for (var parent in $scope.parents) {   
 
     let deffered = $q.defer(); \t \t 
 
     promises.push(deffered.promise); 
 
     $http.get('https://stackoverflow.com'). 
 
     then(res => { 
 
      console.log('true'); 
 
      $scope.results.push(true); 
 
      deffered.resolve(true); 
 
     }, err => {   
 
      console.log('false'); 
 
      $scope.results.push(false); 
 
      deffered.resolve(false); 
 
     }); 
 
     } 
 

 
     $q.all(promises).then(() => { 
 
     console.log('completed'); \t \t \t 
 
     $scope.loaded = true; 
 
     }); \t 
 
    } 
 
}])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app='app' ng-controller='ctrl'> 
 
    <input type='button' value='Click' ng-click='handler()'/> 
 
    <div ng-if='loaded'> 
 
    <span ng-repeat='result in results track by $index'>{{result}} </span> 
 
    </div>  
 
</div>