角厂模块得到承诺数据

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); // 
    }); 

})]