AngularJS 使用 ng-style 设置宽度答案

【问题标题】：AngularJS set width using ng-styleAngularJS 使用 ng-style 设置宽度
【发布时间】：2016-08-22 13:25:11
【问题描述】：

我想在触发来自 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 事件和进度值。但是，当我上传图片时，宽度永远不会改变。

【问题讨论】：

你把你的console.log放在哪里了？你在function updateProgress(percent)里面检查了吗？
我从 updateProgress 函数中检查了console.log，它记录了正确的值。这是截图：imgur.com/a/GXdNt
@cole Roberts，将调试器放入updateProgress 方法并观察percent 的值。如果可能的话，你可以添加 Fiddle/Plnkr。
@KhalidHussain 我已经做到了。请看我上面的评论。传递给函数时值是正确的。
假设s3 库不是Angular 摘要循环的一部分或不参与，您需要将$scope 属性的更改包装在$scope.$apply 或$scope.$applyAsync 中。见docs.angularjs.org/api/ng/type/$rootScope.Scope#$apply。用户 Raghu 早些时候回答了这个问题，但由于某种原因被否决了

标签： javascript css angularjs

【解决方案1】：

Phil 在此线程的 cmets 中的回答。

假设 s3 库不是 Angular 摘要的一部分或私有循环，您需要将对 $scope 属性的更改包装在 $scope.$apply 或 $scope.$applyAsync。看 docs.angularjs.org/api/ng/type/$rootScope.Scope#$apply。用户 Raghu 早些时候回答了这个问题，但由于某种原因被否决了

解决方案是在updateProgress fn 中简单地调用$scope.$apply()。

【讨论】：