AngularJS推迟了$ http.get响应,空数组

时间:2016-02-09 06:19:14

标签: angularjs deferred

请帮助更改此代码以便能够使用$ http.get html,此时生成的数组(html_controls)为空。但是,我可以在控制台中看到$ http.get中所有请求的响应。谢谢。

angular.module('exodus-grid').controller('DynamicPropertiesController', ['$scope', '$http', '$templateCache', '$q', 'coreFactory',
    function($scope, $http, $templateCache, $q, coreFactory) {
        //$scope.DynamicProperties = 'Property being added to the controller.';

        //coreFactory.fetchData('http://uat.resources.newscdn.com.au/cs/networksales/products/latest/products.json', 'products');

        // TODO: Change this harcoded value to the products.json in s3
        $scope.products = [{
            "id": "btyb",
            "label": "BTYB + Superskin",
            "description": "",
            "name": "btyb",
            "active": true,
            "properties": [{
                "bannerLink": [{
                    "tmp_prop_name": "bannerLink",
                    "label": "Header Tracking Link (Desktop)",
                    "type": "textbox"
                }],
                "superskinLink": [{
                    "tmp_prop_name": "superskinLink",
                    "label": "Sideskin Tracking Link (Desktop)",
                    "type": "textbox"
                }],
                "ImgUrl": [{
                    "tmp_prop_name": "ImgUrl",
                    "label": "Header Image Url",
                    "type": "textbox"
                }]
            }]
        }, {
            "id": "iframe",
            "label": "iframe",
            "description": "",
            "name": "iframe",
            "active": true,
            "properties": [{
                "link": [{
                    "tmp_prop_name": "link",
                    "label": "iFrame source Url",
                    "type": "textbox"
                }]
            }]
        }];

        var requests = [];
        var html_controls = [];

        var product = $scope.products[0];
        var properties = angular.fromJson(product.properties);
        //console.log(angular.toJson(properties));
        angular.forEach(properties, function(property) {
            angular.forEach(property, function(item) {
                //console.log(angular.toJson(property));
                if (item[0].type === "textbox") {
                    //console.log(angular.toJson(item));
                    //console.log(Object.getOwnPropertyNames(property));
                    //console.log(Object.keys(property));
                    $http.get("plugins/k-plugin-exodus-grid/templates/properties/textbox.html").success(function(html) {
                        html = html.replace("%%label%%", item[0].label);
                        html = html.replace("%%scope%%", item[0].tmp_prop_name);

                        //console.log(html);
                        html_controls.push(html);
                        console.log(html_controls);

                        var deferred = $q.defer();
                        requests.push(deferred.promise);
                        console.log(deferred, deferred)
                    }).then(function() {
                        //$scope.html = html_controls;
                    });
                }
            });
        });

        //console.log(html_controls);
        //$scope.html = html_controls;
        $q.all(requests).then(function(data) {
            console.log("12312312 " , data);
            $scope.html = html_controls;
        });
    }
]);

1 个答案:

答案 0 :(得分:0)

看起来你正试图解决一系列空的承诺。由于它是异步运行的,当我们调用$q.all()时,requests[]仍为空。

尝试构建一组promises,然后使用q.all()解决此问题:

var requests = []; // a list of promises
angular.forEach(properties, function(property) {
  angular.forEach(property, function(item) {
    var promise = $http.get("/yoururl"); // $http.get returns a promise
    requests.push(promise); // add to list of requests as a promise
  });
});

$q.all(requests).then(function (result) {    
    console.log('results' + result);
});