部分功能后重新渲染

Question

I have lots of data in an array and want to render all items in it. This may take a while to render and therefore I want to insert a loading animation before the rendering starts.

The code looks something like this:

$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;
}

But when I execute the function foo, first ng-repeat renders all items and afterwards the loading animation starts. How can I achieve a reversed behavior (First the loading animation and then the ng-repeat rendering)?

Answer 1

Inject $timeout to the dependencies of the controller and then change the function to:

$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;
   });
}

The timeout will let the view refresh before you start the data processing

Answer 2

You can use $timeout to achieve it. In your code set timeout with load duration.

$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);
}

Don't forget to inject $timeout in your controller.