保存后重复的$ scope对象

Question

我有这段代码：

for (var i = 0; i < $scope.groups.length; i++) {
                        $http.post('/api/projects/' + data.Project.Id + '/recruiting-groups', angular.toJson($scope.groups[i]))
                            .then(function (response) {
                                console.log(response.data.Data[0])
                                $scope.groups[i] = response.data.Data[0];
                            })
                            .catch(function(err) {
                                var errorMsg = "Error saving recruiting group. Contact support.";
                                $.jGrowl(errorMsg, { header: 'Error' });
                                error = true;
                            });
                    }

工作和保存就好了。但不是覆盖我的$ scope.groups [i]而是创建一个副本。

保存之前：＆gt;

保存后：＆gt;

我已经在日志中检查了$ scope.groups，确定它已经被欺骗了。为什么？我该如何解决？

Answer 1

您有一个在异步调用中访问共享变量的经典问题。当您的异步调用运行时，循环将耗尽，i将具有迭代的最后一个值。在你的情况下，i将是$scope.groups.length。因此，解决方法是让您的回调获得自己的i迭代实例，而不是共享i。此外，重新考虑您的通话也是一个好主意。

一种简单的方法是通过函数进行调用。

for (var i = 0, l=$scope.groups.length ; i < l; i++) {
  performRequest(i);
}
function performRequest(i){
    $http.post('/api/projects/' + data.Project.Id + '/recruiting-groups', angular.toJson($scope.groups[i]))
        .then(function (response) {
            $scope.groups[i] = response.data.Data[0];
        })
        .catch(function(err) {
            var errorMsg = "Error saving recruiting group. Contact support.";
            $.jGrowl(errorMsg, { header: 'Error' });
            error = true;
     });
}

但当然更清洁的方式是： -

angular.forEach($scope.groups, performRequest)

function performRequest(group, i){
    $http.post('/api/projects/' + data.Project.Id + '/recruiting-groups', angular.toJson(group))
    .then(function (response) {
      angular.extend(group, response.data.Data[0]); //or $scope.groups[i] = response.data.Data[0];
    })
    .catch(function(err) {
        var errorMsg = "Error saving recruiting group. Contact support.";
        $.jGrowl(errorMsg, { header: 'Error' });
        error = true;
    });
}