我想在触发来自 S3 的事件时动态调整 div 的大小。
在下面的代码中,我发送了 progress
变量到 updateProgress
用作参数。此功能在我的 Angular Controller 的最高范围内。
s3.upload(params).on('httpUploadProgress', function(evt) {
var progress;
progress = Math.floor(evt.loaded * 100 / evt.total);
updateProgress(progress);
})
.send(function(err, res, data) {
if (err) {
growl.error("We're having trouble uploading your image. Please try again!", {title: 'Whoops!', ttl: 5000});
console.log('Error uploading' + err);
} else {
imgLocation = res.Location;
postToFirebase(imgLocation);
}
});
这是我的 updateProgress 函数
function updateProgress(percent) {
$scope.progressBar = {
'width': percent + '%'
}
}
HTML
<div ng-style="progressBar" class="shot__image--post__progress"></div>
我可以成功地控制台记录 AWS 事件和进度值。但是,当我上传图片时,宽度永远不会改变。
最佳答案
Phil 在此线程的评论中的回答。
Assuming the s3 library is not part of or privy to the Angular digest cycle, you need to wrap the changes to $scope properties in $scope.$apply or $scope.$applyAsync. See docs.angularjs.org/api/ng/type/$rootScope.Scope#$apply. User Raghu answered this earlier but was downvoted for some reason
解决方案是在 updateProgress
fn 中简单地调用 $scope.$apply()
。
关于javascript - AngularJS 使用 ng-style 设置宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39071008/