Question

我有一个显示预加载器的div。我想在我的ng-repeat完成所有数据加载后隐藏该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？ Emit在范围层次结构中向上发送事件，而广播则向下发送它。

解决问题的一个可靠方法是让$ rootScope向下广播事件：

$rootScope.$emit('ngRepeatFinished');

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

Answer 2

一种解决方案是向ng-repeat块添加方法调用，例如

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

然后在你的控制器中

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

转发器完成后，AngularJS隐藏预加载器

2 个答案: