Question

我在数组中有很多数据，想要渲染其中的所有项目。这可能需要一段时间才能渲染，因此我想在渲染开始之前插入加载动画。

代码看起来像这样：

$scope.foo = function() {
   // Start loading animation
   $loading.start();

   // Load objects into an array. These objects are 
   // rendered by the ng-repeat directive from angular
   $scope.array = data;
}

但是当我执行函数foo时，首先ng-repeat渲染所有项目，然后开始加载动画。如何实现反转行为（首先是加载动画，然后是ng重复渲染）？

Answer 1

将$timeout注入控制器的依赖项，然后将函数更改为：

$scope.foo = function() {
   // Start loading animation
   $loading.start();

   // Load objects into an array. These objects are 
   // rendered by the ng-repeat directive from angular
   $timeout(function() {
       $scope.array = data;
   });
}

超时将在开始数据处理之前刷新视图

Answer 2

您可以使用$ timeout来实现它。在您的代码集超时与负载持续时间。

$scope.foo = function() {
  // Start loading animation
  $loading.start();

  $timeout(function() {
    // Load objects into an array. These objects are 
    // rendered by the ng-repeat directive from angular
    $scope.array = data;
  }, YOUR_LOAD_TIME);
}

不要忘记在控制器中注入$timeout。

部分功能后重新退回

2 个答案: