AngularJS set width using ng-style

Question

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.

Where did you put your console.log? Did you checked it inside function updateProgress(percent)? — Raman Sahasi
– Raman Sahasi, Commented Aug 22, 2016 at 3:42
I checked the console.log from the updateProgress function and it's logging the correct values. Here's a screenshot: imgur.com/a/GXdNt — Cole Roberts
– Cole Roberts, Commented Aug 22, 2016 at 4:00
@cole Roberts, put debugger in updateProgress method and observe the value of percent. If possible you can add Fiddle/Plnkr. — Khalid Hussain
– Khalid Hussain, Commented Aug 22, 2016 at 4:04
@KhalidHussain I have done this. Please see my above comment. The value(s) are correct when being passed to the function. — Cole Roberts
– Cole Roberts, Commented Aug 22, 2016 at 4:18
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 — Phil
– Phil, Commented Aug 22, 2016 at 5:06

Cole Roberts · Accepted Answer · 2016-08-22 05:25:11Z

2

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.

answered Aug 22, 2016 at 5:25

Cole Roberts

9854 gold badges15 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS set width using ng-style

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related