Question

我需要定期从外部REST Api重新加载数据，所以我找到并使用了这个问题的代码：AngularJS ngcontroller to be reloading data periodically

代码复制在这里：

    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（我不知道这是否有所不同）。

我只是在我的视图中打印数据，问题是每次更新（每秒一次）文本都会闪烁。它在新数据恢复时消失了吗？显然我希望它能够顺利更新而不会闪烁。

Answer 1

问题在于时机。浏览器解析您的空数据集并呈现模板，然后，当数据到来时，它将再次解析数据并重绘。这些$摘要可能会导致闪烁。

有两种方法可以避免这种情况：

1）在父元素

上使用ng-cloak指令

2）制作一个假布尔值，在数据加载时将其设置为true，并在父元素上添加一个带有该布尔值的ng-if

此外，您可以覆盖$digest方法并确切地查看调用的次数以及触发的次数。请注意，大多数angularjs默认服务都会触发$摘要（例如，通过$http的任何网络请求将在执行成功/错误方法后触发$digest。

在AngularJS数据中定期重新加载数据时闪烁

1 个答案: