2013-12-18 91 views
3

我有一個Angular應用程序,其視圖通過$ scope引用更新爲由工廠單例顯示的某些模型和狀態對象。在初始化期間,或者在視圖內的某些操作中,工廠必須進行多個AJAX調用(使用Restangular),然後等待所有承諾解決後再更新其狀態和模型屬性。在對未來的數據採取適當的副作用之前,如何等待多個期貨得到解決?使用Restangular在Angular中協調多個AJAX調用

例如顯示加載微調器或模型屬性的div和根據狀態刷新此屬性的按鈕。

<div ng-controller="MyCtrl"> 
    <div ng-if="state.isLoading" class="loading-animation"></div> 
    <div ng-if="!state.isLoading"> 
     <span ng-bind-template="Property: {{model.property}}"></span> 
     <button ng-click="refresh()">Refresh</button> 
    </div>  
</div> 
App.controller('MyCtrl', ['$scope', 'MyFactory', function('$scope', 'Factory') { 
    $scope['model'] = Factory['model']; 
    $scope['state'] = Factory['state']; 
    $scope.refresh = function() { 
     Factory.init(); 
    }; 
}]) 
.factory('MyFactory', ['restangular', function('Rest') { 
    var Factory = { 
      model = { 
       property: null 
      }, 
      state = { 
       isLoading = false; 
      } 
     }; 

    Factory.init = function() { 
     Factory['state']['isLoading'] = true; 

     var promise1 = Rest.one('first').get(); 
      promise2 = Rest.one('second').get(); 

     // Resolve both promises. 
     // Only when both promises are done, 
     //  update model.property based on data returned and relevant logic. 
     // Toggle isLoading state when finalized. 
    } 

    return Factory;  
}]) 
.run(['MyFactory', function(Factory) { 
    Factory.init(); 
}]); 

什麼我遇到的麻煩是如何實現Factory.init的註釋部分()。我知道我可以使用Angular的$ q,但是我對延遲對象不太熟悉,我發現$ q上的Angular文檔有點混亂。

回答

9

我認爲$q.all()是你想要的。這:

將多個承諾組合成一個單一的承諾,當所有的輸入承諾解決時解決。 1

未經測試的例子:

var promises = [ 
    Rest.one('first').get(), 
    Rest.one('second').get() 
]; 

$q.all(promises).then(function (results) { 
    var resultOfFirstPromise = results[0], 
     resultOfSecondPromise = results[1]; 
    // update model.property based on data returned and relevant logic. 
}); 
+0

謝謝,這個作品! – SirTophamHatt

+0

對我來說也很有幫助的是使用關聯數組。我可以選擇使用按鍵添加承諾,並檢查按鍵以在模型上觸發不同的副作用。 – SirTophamHatt

+0

我面對的這個問題是,如果我有一個.then在我的控制器它是拋出未定義 – alyn000r