在AngularJS中返回數據'$ q promise

Question

我正在嘗試運行http GET的promise的序列（一次一個，而不是並行）。考慮提交烹飪配方，服務器將只接受每個HTTP請求一個步驟。他們必須按順序發送，否則派將變得混亂。最後一步是唯一一個返回數據（一個熱蘋果派）。

我創建了一個Plunker http://plnkr.co/edit/yOJhhw?p=preview

我們將與控制器

angular.module("app") 
    .controller("sequencialCtrl", ["$scope", "seq", function($scope, seq) { 

該控制器由庫文件中顯示的步驟列表開始啓動，以便他們將採取> 0的時間d /湖

var recipeSteps = [ 
     'http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js', 
     'https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js', 
     'https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js' 
    ]; 

然後，我創建一個範圍變量來顯示檢索到的js文件的前80個字符僅用於測試目的。

$scope.inters = seq.intermediates; 

然後我試着打電話給工廠提供的承諾。這崩潰的控制檯，當時

// the console shows that seq.submitRecipe is undefined 
    seq.submitRecipe.then(function(data) { 
     $scope.results = data; 
    }); 
    }]); 

現在工廠

angular.module('app').factory('seq', function($http, $q) { 

與我們共創中間體和submitRecipe

var intermediates = ['test1', 'test2']; 
    var submitRecipe = function(theSteps) { 
    var deferredRecipe = $q.defer(); 
    var deferredPromise = deferredRecipe.promise; 

    deferredPromise 
     .then(function() { 
     var deferred = $q.defer(); 
     var promise = deferred.promise; 
     $http({ 
      method: 'GET', 
      url: theSteps.shift() 
     }).then(function(response) { 
      intermediates.push(response.data.substr(0, 80)); 
      deferred.resolve(response.data.substr(0, 80)); 
     }); 
     return promise; 
     }) 
     .then(function() { 
     var deferred = $q.defer(); 
     var promise = deferred.promise; 
     $http({ 
      method: 'GET', 
      url: theSteps.shift() 
     }).then(function(response) { 
      intermediates.push(response.data.substr(0, 80)); 
      deferred.resolve(response.data.substr(0, 80)); 
     }); 
     return promise; 
     }) 
     .then(function() { 
     var deferred = $q.defer(); 
     var promise = deferred.promise; 
     $http({ 
      method: 'GET', 
      url: theSteps.shift() 
     }).then(function(response) { 
      intermediates.push(response.data.substr(0, 80)); 
      deferred.resolve("Apple Pie"); 
     }); 
     return promise; 
     }); 

如前所述之前，我只想要回從數據最後那是「Apple Pie」。

我們收出submitRecipe函數...

// if this resolve isnt here, nothing is execute 
    deferredRecipe.resolve(); 
    $rootScope.$apply(); 
    return deferredPromise; 
    }; 

我發現，如果我沒有這種決心（）的then s的無法運行。

最後我們公開我們工廠的方法。

return { 
    submitRecipe: submitRecipe, 
    intermediates: intermediates 
    }; 
}); 

在一天結束時，我想$ scope.results是「Apple Pie」。

感謝任何幫助。

Answer 1

這裏是工作plunkr

有一對夫婦編輯的這不得不進行：

submitRecipe是一個函數，所以你怎麼稱呼它以這樣的方式

seq.submitRecipe(recipeSteps).then(function(data) { 
    $scope.results = data; 
}); 

然後您可以刪除不必要的$rootScope.$apply()：

deferredRecipe.resolve(); 
// $rootScope.$apply(); 
return deferredPromise;