Angular binding for loading doesn't update the HTML

Question

I am trying to show a loading indicator whenever a user clicks the save button. When the button is clicked, the state changes successfully, but reverting back the value of the loading property on scope to the false state doesn't update the UI.

Is it something i'm doing wrong with scope properties, or is this a flaw with angular?

Here's my jsBin: http://jsbin.com/xafexorope/2/edit?html,output

zewa666 · Accepted Answer · 2014-11-14 17:44:54Z

2

The reason why it doesnt work is because Angular's internal dirty-checking loop is not fired. It's because you use a standard setTimeout. Instead of that, either manually call $scope.$apply() at the end of your setTimeout callback, or better, use the angular wrapper $timeout.

Here is your updated jsbin: http://jsbin.com/devuhovaxa/3/edit

Additionally here the docs for $timeout: https://docs.angularjs.org/api/ng/service/$timeout

answered Nov 14, 2014 at 17:44

zewa666

2,60319 silver badges20 bronze badges

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

3 Comments

LordZardeck Over a year ago

In my actual application its in the callback for a UserApp.io ajax request, i just used a timeout so the example would work. That being said, I used $scope.$apply there, and it worked! Thanks!

LordZardeck Over a year ago

Any useful documentation you would recommend regarding this particular issue? Specifically the "dirty-checking" loop and the $scope.$apply?

zewa666 Over a year ago

Not sure if I understand what exactly you are searching for but those posts are pretty nice: sitepoint.com/understanding-angulars-apply-digest and this one benlesh.com/2013/08/angularjs-watch-digest-and-apply-oh-my.html

Collectives™ on Stack Overflow

Angular binding for loading doesn't update the HTML

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related