user1126545
user1126545

Reputation: 73

Non-Flickering Polling in Angular with REST Backend

I managed getting a constant polling of the backend functional using this answer.

But on every timeout the UI is flickering (empty model for a short time). How can I update the model (and the view respectively) after the new data arrived in order to avoid this flickering effect?

Here is my current controller (slightly modified from step_11 (Angular.js Tutorial)):

function MyPollingCtrl($scope, $routeParams, $timeout, Model) {

(function tick() {
    $scope.line = Model.get({
        modelId : $routeParams.modelId
    }, function(model) {
        $timeout(tick, 2000);
    });
})();

}

// edit: I'm using the current stable 1.0.6 of Angular.js

Upvotes: 6

Views: 4301

Answers (1)

Gloopy
Gloopy

Reputation: 37785

Try updating the data in the success callback. Something like this:

(function tick() {
    Model.get({
        modelId : $routeParams.modelId
    }, function(model) {
        $scope.line = model;    
        $timeout(tick, 2000);
    });
})();

This should prevent the flicker that is occurring when $scope.line is empty as the Model resource is fetching the data.

Upvotes: 10

Related Questions