为什么我的 AngularJS 绑定并不总是正确更新？

Question

我正在使用 Danial Farid's ng-file-upload plugin 创建一个与 AWS S3 配合使用的简单图像上传页面。它有一个简单的按钮来上传新图像和图像列表。像这样：

<ul>
    <li ng-repeat="image in product.images">
        <a class="thumbnail" href="{{ image }}" target="_blank">
          <img ng-src="{{ image }}" alt="image">
        </a>
    </li>
    <li>
        <div class="btn-image-upload" 
            ngf-select 
            ngf-change="upload($files)"
            ngf-accept="'image/*'"></div>
    </li>
</ul>

在我的控制器上：

$scope.upload = function (files) {

    var aws_policy, aws_policy_signature;

    if (files && files.length) {
        $http
            .get(API_URL+'/helper/aws_policy')
            .then(function(data) {
                aws_policy = data.data.policy;
                aws_policy_signature = data.data.signature;
                for (var i = 0; i < files.length; i++) {
                    var file = files[i];
                    var key = generate_aws_key() + '.' + file.name.split('.').pop();
                    var base_url = 'https://.../';

                    Upload
                    .upload({ ... })
                    .success(function( data, status, headers, config ) {

                        console.log($scope.product);
                        $scope.product.images.push( base_url + key );
                        console.log($scope.product);

                    });
                }
            });
    }
};

文件正在正确上传（我从 AWS 得到了一个很好的 204 Success）并且两个 console.log($scope.product) 被调用以显示适当的结果（第二个在 images数组).

事情是这样的。这个宝贝在我的开发机器上完美运行，但有时在登台或生产服务器上，图像列表在 $scope.product.images 更新时未更新。有时，我的意思是它有 1/3 的时间这样做。

总结

有时，仅在我的生产服务器上，DOM 在 AngularJS 摘要中更新 $scope.product.images 时不会更新。

我的编程经验告诉我，有时在这类事情中不是一个可接受的概念，它必须与 总是[=38] 的东西相关=]出现这个问题的时候就出现了，但是我调试了很久也没找到真正的原因。想法？

Answer 1

很有可能是looping within asynchronous callbacks造成的：

你必须冻结i的值：

$scope.upload = function (files) {

    var aws_policy, aws_policy_signature;

    function upload(index) {
        var file = files[index];
        var key = generate_aws_key() + '.' + file.name.split('.').pop();
        var base_url = 'https://.../';

        Upload
        .upload({ ... })
        .success(function( data, status, headers, config ) {

            console.log($scope.product);
            $scope.product.images.push( base_url + key );
            console.log($scope.product);

        });
    }

    if (files && files.length) {
        $http
            .get(API_URL+'/helper/aws_policy')
            .then(function(data) {
                aws_policy = data.data.policy;
                aws_policy_signature = data.data.signature;
                for (var i = 0; i < files.length; i++) {
                    var file = files[i];
                    upload(i);
                }
            });
    }
};

为什么我的 AngularJS 绑定并不总是正确更新？

Why is my AngularJS binding not always updating properly?

angularjs

angular-file-upload