我正在创建一个简单的图像上传页面,该页面使用
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成功),并且调用了两个console.log($scope.product)来显示适当的结果(第二个是在images数组上的项目).
这就是事情.这个宝贝在我的开发机器上工作得很好,但有时在登台或生产服务器上,当$scope.product.images是时,图像列表没有被更新.有时候,我的意思是它有1/3的时间.
总结
有时,仅在我的生产服务器上,当在AngularJS摘要中更新$scope.product.images时,不会更新DOM.
我的编程经验告诉我,在这类问题中,有时候这个概念并不是一个可接受的概念,它必须与出现这个问题时经常发生的事情有关,但是我进行了广泛的调试而未能找到真正的原因.想法?
最佳答案 这很可能是由
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);
}
});
}
};