2017-10-06 111 views
1

解釋我有一個控制器,像這樣:價值並不總是角

controller.things = ['a', 'b', 'c']; 
controller.loading = true; 
controller.responses = []; 

controller.handlePromises = function(){ 
    var promises = []; 

    for(promiseIndex = 0; promiseIndex < controller.things.length; promiseIndex++) { 
     promises.push(controller.promise(things[promiseIndex]); 
    } 

    Promise.all(promises).then(function success(response){ 
     for(responseIndex = 0; responseIndex < response.length; responseIndex++){ 
      responses.push(response[responseIndex].data); 
     } 
     controller.loading = false; 
    } 
} 

controller.promise = function(value){ 
    //Some $http request to Database; 
} 

controller.handlePromises(); 

controller.things的東西量取決於用戶。連接到這是做一個簡單的HTML頁面如下:

<div ng-if="!controller.loading"> 
    <div ng-repeat="response in controller.responses"> 
     {{response}} 
    </div> 
</div> 

我的問題是,有一個50/50的機會的內容變得可見,其他時間我可以看到,該承諾具有調試器已解決並且加載設置爲false,但ng-if一直隱藏內容。即使顯示內容,ng-repeat很有可能說controller.responses仍然是空的。

無論需要多長時間,我如何保證ng-if在承諾解決時接受controller.loading爲假?此外,ng-repeat的相同問題有時也不會在controller.responses中看到值。我考慮過超時,但這不是理想的解決方案,因爲它可能需要半秒到十秒的時間。

+0

是否所有承諾成功嗎?您的Promise.all(...)只有成功回調。我猜想,如果一個或多個承諾失敗,你最終不會成功回調。 – mortb

+0

該示例假定所有承諾都已成功解決,但實際的完整實現有故障回退。 – Patrick

+0

您是否嘗試使用$ digest.apply()或$ scope.apply()。很可能UI不會更新範圍已更改。 –

回答

1

問題是您正在使用Promise.all而不是$q$q是由Angular團隊構建的Promise庫,它將爲您執行$digest週期。

$q.all(promises).then(function success(response) { 
    for (responseIndex = 0; responseIndex < response.length; responseIndex++) { 
    responses.push(response[responseIndex].data); 
    } 
    controller.loading = false; 
}); 

Read more about $q