Non-Flickering Polling in Angular with REST Backend

Question

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

Enthusiastic

Answer 1

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.

Derwood