Простой предварительный загрузчик AngularJS для ng-repeat?

Question

У меня есть div, который показывает preloader. Я хочу скрыть этот div только после того, как все мои данные завершили загрузку в моем ng-повторе.

До сих пор это то, что я мог бы объединить, но части еще не работают.

Есть ли еще один простой способ сделать это?

Plunker: http://plnkr.co/edit/ilgOZzIy2axSi5Iy85C7?p=preview

HTML:

<div ng-controller="locationAccordionCtrl"> 
    <div ng-repeat="location in locations" on-finish-render="ngRepeatFinished"> 

     {{location.siteName}} 

     <ul> 
      <li ng-repeat="listOfLocations in location.locationsList track by $index"> 
       {{listOfLocations}} 
      </li> 
     </ul> 

    </div> 
</div> 

Контроллер:

App.controller('locationAccordionCtrl', function ($scope) { 

    $scope.locations = [ 
    { 
     "siteName":"First Location", 
     "locationsList":['First Location 1', 'First Location 2', 'First Location 3'] 
    }, 
    { 
     "siteName":"Second Location", 
     "locationsList":['Second Location 1', 'Second Location 2', 'Second Location 3'] 
    }, 
    { 
     "siteName":"Third Location", 
     "locationsList":['Third Location 1', 'Third Location 2', 'Third Location 3'] 
    } 
    ]; 

// Hide preloader after repeater is finished loading data 
App.directive('onFinishRender', function ($timeout) { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attr) { 
      if (scope.$last === true) { 
       $timeout(function() { 
        scope.$emit('ngRepeatFinished'); 
       }); 
      } 
     } 
    } 
}); 

// hide preloader 
$scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent) { 
    $scope.hidePreLoader = true; 
}); 

}); 

Answer 1

вот как вы можете это сделать

var App = angular.module('App.directives', []); 
    App.directive('routeLoadingIndicator', function($rootScope){ 
     return { 
     restrict:'E', 
     template:"<h1 ng-if='isRouteLoading' 
     style=' 
     position: fixed; 
     width: 100%; 
     height: 100%; 
     background: rgb(255, 255, 255) none repeat scroll 0% 0%; 
     margin: 0px; padding: 0px; left: 0px; 
     top: 0px; right: 0px; bottom: 0px; 
     z-index: 2147483647; 
     ' >Loading...</h1>", 
     link:function(scope, elem, attrs){ 
     scope.isRouteLoading = false; 

     $rootScope.$on('$routeChangeStart', function(){ 
      scope.isRouteLoading = true; 
     }); 

     $rootScope.$on('$routeChangeSuccess', function(){ 
      scope.isRouteLoading = false; 
     }); 
     } 
    }; 
    });