CODEWITHSUNDEEP
javascriptcssangularjs
Cole Roberts
Cole Roberts

Reputation: 984

AngularJS set width using ng-style

I'd like to dynamically resize a div when an event from S3 is fired.

In the following code I send the progress variable to the updateProgress function as a param. This function is in the highest scope of my 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);
        }
    });

Here's my updateProgress function

function updateProgress(percent) {
    $scope.progressBar = {
        'width': percent + '%'
    }
}

HTML

<div ng-style="progressBar" class="shot__image--post__progress"></div>

I can successfully console.log the AWS event and the progress value. However, when I upload the image the width never changes.

Upvotes: 4

Views: 759

Answers (1)

Cole Roberts
Cole Roberts

Reputation: 984

Answer from Phil in the comments of this thread.

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

The solution was to simply call $scope.$apply() within the updateProgress fn.

Upvotes: 2

Related Questions