2017-09-21 21 views
0

使用AngularJS我有一個historicalDataController模式爲AngularJS更新視圖遞歸HTTP期間控制器GET

angular.module('armsApp').controller('historicalDataController', ($scope, $historicalFactory) => { 
    $scope.histogram = new Histogram('#histogram'); 

    historicalFactory.getHistorycalData().then((data) => { 
    $scope.histogram.update(data); 
    }); 
}); 

和historicalFactory

angular.module('armsApp').factory('historicalFactory', ['$q', '$http', 

    function ($q, $http) { 

    return { 

     getHistoricalData() { 
     const deferred = $q.defer(); 

     function loadAll(page) { 
      const token = cognito.getToken('id'); 
      // let deferred = $q.defer(); 

      return $http({ 
      // details 
      }) 
      .then((response) => { 

       if (response.data.pages > page) { 
       loadAll(page + 1); 
       } else { 
       deferred.resolve(response.data); 
       } 
      }); 
     } 
     loadAll(0); 
     return deferred.promise; 
     }, 

前者管理我的D3直方圖元件,而後者負責處理通信我的數據服務器。

從historicalDataController我開始調用一個函數在historicalFactory中使用遞歸執行串行GET到分頁的REST端點並聚合數據。在控制器中,當函數返回完整的數據集時,我正在更新D3直方圖,其功能正常。

現在我想逐漸更新每個GET結果的直方圖,但回調在工廠中無法訪問UI元素(我覺得視圖相關的邏輯不屬於那裏)。

這裏使用的模式有哪些好的選擇?

從工廠我應該寫增量數據到控制器中的變量並向控制器廣播一個事件?不知何故,這感覺很混亂。

我可以使用某種跨模塊裝飾器來使用遞歸GET函數包裝直方圖更新函數嗎?

+0

對基於承諾的服務(如$ http)使用'$ q.defer'是[代碼異味](https://en.wikipedia.org/wiki/Code_smell),這是一個指示一個更深層次的問題。在這種情況下,'$ q.defer'永遠不會解析'$ http'請求是否有錯誤。要寫出答案,我需要更多地瞭解數據。什麼是'data.pages'?並且它是如何隨着每個'$ http'調用而改變的? – georgeawg

+0

我建議你先試着讓它在控制器中工作。然後圖解如何將其放入服務中。 – georgeawg

+0

'loadAll(0)'返回什麼? loadAll(1)'返回什麼? – georgeawg

回答

0

您需要使用「通知」回調來提供承諾更新而不解決此問題。當您的$http呼叫中的一個解決時,請致電deferred.notify()。在你的控制器中,你需要在你的.then()中提供「catch」和「notifiy」回調。

請參閱$ q的完整文檔。 https://docs.angularjs.org/api/ng/service/ $ q

相關問題