角度工厂模块获得承诺数据

时间:2016-01-05 19:42:34

标签: javascript angularjs asynchronous

我有一个模块factoty做$ http呼叫名称:'containeData' 比我通过承诺将数据发送到其他工厂模块  名称: 'divLogicFactory'。我想发送对象数组“arraysOfDives” 到控制器。但是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);


})]

1 个答案:

答案 0 :(得分:-1)

快速回答

您应该从object的{​​{1}}函数外部返回自定义承诺.then,而不是返回data.getDivData函数(但在处理$http调用时创建开销承诺被视为反模式)。不要去$http部分。

<强>代码

Quick answer

<强>详细

您未从代码的正确部分返回承诺。

除此之外,你已经创造了在那个地方不需要的开销承诺。当进行ajax调用时,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; } 方法会返回一个promise对象。你可以利用这种方式。

$http

此外,您在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获取arraysOfDives,您使用了promise链,以便在创建div之后,您将返回该arrayOfDives对象。

<强>工厂

setDivsData

<强>控制器

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