Question

我有一个ul，它使用ng-repeat从数组加载数据。数组非常大，列表的负载持续太多。

我想放置一个加载器，因此它在加载开始时显示并隐藏，这是重要的部分，当ul在html中完全呈现时。我的问题是，当完全渲染ul时，我找不到抛出函数的方法。

我现在的方式是：

控制器：

function renderMatters() {
    api_horus.getMatters()
        .success(function (data) 
        {
               $scope.matters = data.matters;
          }

        })
        .error(function (error) {
            status = 'Unable to load matters data: ' + error.message;
        });

}

HTML：

<ul ng-model="matters" class="list clearfix" ng-class="{'floatingList':isHorizontal}">
      <li ng-repeat="matter in filtered = (matters | filter:searchText) class="matter_grid_li">

...

我已经尝试过这些可能的解决方案了：

1。使用ngRoute和$ viewContentLoaded：

在angular-directive.js

中

$scope.$on('$viewContentLoaded', function() {
    App.initComponent();
    alert("Loaded");
});

这样可行，但是当完全加载时不会抛出警报，但是它的一半或多或少都会被抛出。

2。使用模板，ng-include和onload

我将ul放在不同的文件中并将其称为模板

<div ng-include src="'template/test-loading.html'" onload="alert(‘ends’);"></div>

它也不起作用。警报显示在负载的中间。我甚至尝试将ng-repeated li作为模板而不是ul，因为我读到只有在加载PARENT元素时才会抛出onload。也没有成功。

如何知道元素在HTML中完全呈现的时间？

提前Tx。

Answer 1

只需用

创建一个div

<div ng-if="showMsg">{{msg}}</div>
<div ng-if="!showmMsg">
<ul ng-model="matters" class="list clearfix" ng-class="     {'floatingList':isHorizontal}">
  <li ng-repeat="matter in filtered = (matters | filter:searchText) class="matter_grid_li"></div>

在控制器中：

 $scope.showMsg = true;
 $scope.msg = "loading...";
 function renderMatters() {
    api_horus.getMatters()
       .success(function (data) 
       {
           $scope.matters = data.matters;
            $scope.showMsg = false;
            $timeout(angular.noop)
       }

    })
    .error(function (error) {
        status = 'Unable to load matters data: ' + error.message;
    });

   }

检查列表是否完全呈现角度

1 个答案: