pashOCONNOR pashOCONNOR - 3 months ago 17
AngularJS Question

Angular JS - Variable Updating With Interval

Do angular models work with setIntervaL?

Here's an example.. if I have

<p>{{number}}</p>
<button ng-click="testFunc()">TEST</button>


For some reason it updates WITHOUT setInterval, but like this it doesn't:

scope.testFunc = function(){
setInterval(function(){
scope.number--;
},1000);
};


Without setInterval the number will update every single click, but with setInverval it won't update continuously. If I click it every 5 seconds it'll jump a bunch of numbers up (so it's running in the background but the view isn't updating).

Answer

What's happening is that you're using setInterval which is outside of "Angular's world" so it's not updating the DOM. You have two options, one is a lot better than the other.

Use $interval. It's just like setInterval except it's part of the Angular world, so those changes will update your view (be sure to pass $interval into your directive).

scope.testFunc = function(){
    $interval(function(){
        scope.number--;
    },1000);
};

The second option is to call apply() on your current code to kick off a digest cycle, don't do that though since there is a better option.

Comments