AngularJS在中繼器完成後隱藏預加載器

Question

我有一個顯示預加載器的div。只有在我的所有數據在我的重複中完成加載後，我纔想隱藏該div。

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

您是否嘗試過使用$broadcast而不是$emit？發送會在範圍層次結構中向上發送您的事件，而廣播則向下發送它。

一個肯定的方式來解決這個問題是使$ rootScope廣播向下事件：

$rootScope.$emit('ngRepeatFinished'); 

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

Answer 2

一種解決方案將是一個方法調用添加到NG-重複塊，例如

<div ng-repeat="location in locations" ng-init="clearLoader(($index + 1) == locations.length)"> 
    ... 
</div> 

然後在你的控制器

$scope.clearLoader = function (isLastItem) { 
    if (isLastItem) 
     $scope.hidePreLoader = true; 
}