Question

在我的AngularJS应用程序中，我在我的控制器上使用$ http.post（我正在使用json rpc API）获取数据，然后使用

呈现此数据（项目数组）

<div ng-repeat="item in arrayItems">
    {{ makeANewHttpRequest(item.relatedItemId).propertyName }}
</div>

我需要的是实现$ scope.makeANewHttpRequest（itemId）函数，它调用与arrayItems.length一样多的时间，并从新的$ http.post请求中返回relatedItem对象。

我该怎么做？这是一个好习惯吗？

Answer 1

首先，您需要创建一个负责$http.post调用的工厂，该工厂已经向其他人公开，并且它将返回promise对象。您可以通过添加dataService factory作为控制器依赖项的参考来调用该服务方法。控制器将调用服务功能，如dataService.getData(url, data)＆amp;如果arrayItems计数未超过计数器，则每个承诺解决它将增加计数器，更新数据然后调用下一个帖子。

<强>工厂

var myModule = angular.module('myModule', []);
myModule.factory('dataService', function($http) {
    var getData = function(url, data) {
        return $http.post(url, {
            data
        }).then(function(res) {
            return res.data;
        });
    };

    return {
        getData: getData
    }
});

<强>控制器

myModule.controller('mainCtrl', function($scope, dataService) {
    //other code
    $scope.counter = 0;
    $scope.makeANewHttpRequest = function(id) {
        dataService.getData(url+id, data).then(function(data) {
            $scope.data = data; //updated the data each time when response received
            ++$scope.counter; //increment counter
            if ($scope.counter >= $scope.arrayItems.length) //check counter should not exceed limit
                $scope.makeANewHttpRequest(id);
        });
    }
});

<强> HTML

ng-click="counter=0;$scope.makeANewHttpRequest(id)" //clear count and call method

希望这可以帮助你，谢谢。

Answer 2

首先，我认为正确的方法是在您执行第一个http请求时生成服务器中所需的所有数据。这将为您节省您必须为阵列中的每个项目执行的所有额外发布请求。如果你必须这样做，那么正确的方法是在你获得数据后处理对控制器中makeANewHttpRequest的调用。

$http.post('/someUrl').
  success(function(data, status, headers, config) {
   //do the new http requests here
   var promiseArr = []
   angular.forEach(data, function(val) {
     promiseArr.push(makeANewHttpRequest(val));
   });
   $q.all(promiseArr).then(function(updatedValues) {
       for (var i = 0; i < data.length; i++) {
           data[i].relatedItemId = updatedValues[i];
       }
       $scope.arrayItems = data;
   });
});

function makeANewHttpRequest(item) {
    return $http.post('/someUrl', item.relatedItemId);
}

来自模板ng-repeat的AngularJS子$ http.post

2 个答案: