检查列表何时用角度完全呈现

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 中完全呈现？

提前发送。

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

   }