角廠模塊得到承諾數據

Question

我有一個模塊factoty做$ http調用名稱：'containeData' 比我發送數據到其他工廠模塊承諾 名稱：'divLogicFactory'。我想發送對象數組「arraysOfDives」 到控制器。但是陣列的空間是空的。 ，因爲填充數組的方法是回調。 但我不知道如何在回調完成時將對象返回給控制器。請幫助我。

var jsonFactory = angular.module('jsonFactory',[]); 

jsonFactory.factory('containerData',function($http,$q){ 
    var 
     defer = $q.defer(), 
     data = {}; 

    data.getDivData = function(){ 

     return $http({ 

      method:"get", 
      url:"App/metaData/divData.json" 
     }). 
      then(function(response){ 

      defer.resolve(response.data); 

      // return response.data;//defer.promise; 
      return defer.promise; 

     },function(error){ 

      defer.reject(error); 
      return defer.promise; 

     }) 
    } 

var divLogic = angular.module('divLogic', ['jsonFactory']); 

divLogic.factory('divLogicFactory', function (containerData, $q) { 



    var divLogicFactory = {}; 

    divLogicFactory.arraysOfDives = []; 




    divLogicFactory.setDivsData = function() { 

     **this is the call back method** 
     containerData.getDivData().then(function (data) { 

      //extract divData from call back 
      for (var i = 0; i < data.length; i++) { 

       var 
        height = data[i].height, 
        width = data[i].width, 
        border = data[i].border, 
        positionY = data[i].positionTopY, 
        positionX = data[i].positionLeftX, 
        templateID = data[i].templateID; 


       init(height, width, border, positionY, positionX, templateID); 

      } 




     }) 
    } 

    function init(height, width, border, positionY, positionX, templateID) { 


     var $div = $('<div id="templateID"></div>').css({ 

      "height": height, 
      "width": width, 
      "border": border 

     }); 


     divLogicFactory.arraysOfDives.push($div); 
    } 
    return divLogicFactory; 
}); 


var controllers = angular.module('controllers', ['jsonFactory','contentItemDirective','divLogic']); 

controllers.controller("HomeController", function ($http,$scope, containerData,divLogicFactory) { 

    console.log(divLogicFactory); 


})] 

Answer 1

快速回答

您應該返回定製承諾object從外部功能data.getDivData的.then，而不是返回$http功能（但產生額外開銷承諾在處理$http電話被認爲是反模式）。不要去這Quick answer部分。

代碼

data.getDivData = function(){ 
    var defer = $q.defer(), data = {}; 
    $http({ 
     method:"get", 
     url:"App/metaData/divData.json" 
    }). 
     then(function(response){ 
     defer.resolve(response.data); 
    },function(error){ 
     defer.reject(error); 
     //return defer.promise; //removed from here 
    }) 
    return defer.promise; 
} 

詳細

你不是從你的代碼的正確部分返回承諾。

除此之外，你已經創建了在那個地方不需要的開銷承諾。 As $http方法確實在ajax調用時返回一個promise對象。你可以利用這種方式。

data.getDivData = function(){ 
    return $http.get('App/metaData/divData.json').then(function(response){ 
     //used .then here because you could have control over a data here 
     //you validate some prevalidation stuff in data, which should be there 
     //before returning data. otherwise you could just return. 
     //exposing only part `response.data` to consumer, other part is abstracted. 
     return response.data; 
    },function(error){ 
     return error; 
    }); 
    //OR you could just do below as @EProgrammerNotFound suggested. 
    //return $http.get('App/metaData/divData.json') 
}; 

你也有DOM操作代碼存在於setDivsData方法，它不應該存在的地方。如果您將該代碼移動到指令中會更好。

---

爲了得到使用setDivsData您使用的承諾鏈，這樣的div建立之後得到完成後，您將返回arrayOfDives對象呈現arraysOfDives。

廠

divLogicFactory.setDivsData = function() { 
    return containerData.getDivData().then(function (data) { 
     //extract divData from call back 
     for (var i = 0; i < data.length; i++) { 
      var 
       height = data[i].height, 
       width = data[i].width, 
       border = data[i].border, 
       positionY = data[i].positionTopY, 
       positionX = data[i].positionLeftX, 
       templateID = data[i].templateID; 
      init(height, width, border, positionY, positionX, templateID); 
     } 
     return divLogicFactory.arraysOfDives; //return arraysOfDives 
}); 

控制器

controllers.controller("HomeController", function ($http, $scope, containerData, divLogicFactory) { 

    divLogicFactory.setDivsData(data).then(function(){ 
     console.log(data); // 
    }); 

})]