當AngularJS數據定期重裝數據閃爍

我需要的東西，從外部REST API定期刷新數據，所以我發現，從這個問題中使用的代碼：AngularJS ngcontroller to be reloading data periodically 當AngularJS數據定期重裝數據閃爍

的代碼在這裏複製：

app.controller('MainCtrl', function($scope, $http, $timeout) { 

    // Function to get the data 
    $scope.getData = function(){ 
    $http.get('style.css') 
     .success(function(data, status, headers, config) { 

     // Your code here 
     console.log('Fetched data!'); 
    }); 
    }; 

    // Function to replicate setInterval using $timeout service. 
    $scope.intervalFunction = function(){ 
    $timeout(function() { 
     $scope.getData(); 
     $scope.intervalFunction(); 
    }, 1000) 
    }; 

    // Kick off the interval 
    $scope.intervalFunction(); 

});

與我的代碼唯一的區別是我使用ngResource獲取內容而不是$ http（我不知道這是否有所作爲）。

我只是在我的視圖中打印數據，問題是每次更新（每秒一次）文本閃爍。新數據恢復時它會消失嗎？很顯然，我希望它能夠在不眨眼的情況下順利更新。

來源

2015-09-18 Jolle

問題在於時機。瀏覽器分析您的空數據集並呈現模板，然後當數據到達時，它將再次解析數據並重繪。這些$摘要可能會導致閃爍。

有2種方法來避免這種情況：

1）使用ng-cloak指令父元素

2）作出虛假布爾上，當數據加載其設置爲true，並添加ng-if與父元素上的布爾值

此外，您可以覆蓋$digest方法，並確切地看到多少次被調用，並觸發它。請注意，大多數angularjs默認服務都會觸發$摘要（例如，在成功/錯誤方法執行後，通過$http的任何網絡請求都會觸發$digest）。

來源

2015-09-18 12:04:16

當AngularJS數據定期重裝數據閃爍

回答

相關問題