Question

我希望在触发来自S3的事件时动态调整div的大小。

在以下代码中，我将progress变量作为参数发送到updateProgress函数。此函数位于我的Angular控制器的最高范围内。

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事件和进度值。但是，当我上传图像时，宽度永远不会改变。

Answer 1

Phil在这篇帖子的评论中回答。

假设s3库不属于Angular摘要的一部分或属于它循环，您需要将更改包装到$ scope属性中 $ scope。$ apply或$ scope。$ applyAsync。看到 docs.angularjs.org/api/ng/type/$rootScope.Scope#$apply。用户Raghu 之前已经回答了这个问题，但由于某种原因而被低估了

解决方案是在$scope.$apply() fn。

中简单地拨打updateProgress

AngularJS使用ng-style设置宽度

1 个答案: