Question

Angular中有可能对完成的ng-repeat更新进行回调吗？

我可以通过使用指令和$ last属性成功捕获初始渲染，但它不适用于视图更新。

我有一个很大的列表并且过滤需要时间，我想在Angular对视图进行排序时显示一个sppiner，所以我正在寻找一种方法来捕捉瞬间并隐藏旋转器。

应用程序行为应该是： 1.点击排序按钮 2.spinner应该出现 3.将订购角度过滤/数据 4.完成订单脚本 5.出现订购数据 6.spinner隐藏

感谢。

Answer 1

在查看Pankaj Parkar提供的链接中的一些示例之后，我将plunker作为可能实现的演示进行了汇总。我不认为它是完全最优的，你应该研究一个更好的解决方案，但如果你仍在努力，你可能会发现它是一个有用的起点。它并不漂亮，但听起来它可能是你想要的那种东西。

<强> HTML

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.2/angular.js" data-semver="1.4.2"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">

    <button ng-click="populateBigTable()">Populate Table</button>

    <div class="table-wrapper">
      <div class="overlay" ng-hide="hideOverlay">Loading</div>
      <table>
        <thead>
          <tr>
            <th>id</th>
            <th>item</th>
          </tr>
        </thead>
        <tbody>
          <tr ng-hide="hidePlaceholder">
            <td colspan=2 class="placeholder">(no data here yet..)</td>
          </tr>
          <tr ng-repeat="some in data" on-complete="done()" >
            <td>{{some.id}}</td>
            <td>{{some.item}}</td>
          </tr>
        </tbody>
      </table>
    </div>

  </body>

</html>

<强> app.js

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $timeout) {

  $scope.hideOverlay      = true;
  $scope.hidePlaceholder  = false;

  $scope.done = function(){
    $scope.hideOverlay = true;
  }

  $scope.data = [];

  $scope.populateBigTable = function(){

    var data = [];

    $scope.hideOverlay      = false;
    $scope.hidePlaceholder  = true;

    // HACK
    // needed so that angular has time to hide elements
    // no ideal but does the job
    $timeout(function(){
      for(var i = 0; i < 30000; i++){
        data.push({
          id: i,
          item: 'some item'
        });
      }

      $scope.data = data;
    }, 25)

  }

});


app.directive('onComplete', function(){
  return {

    restrict: 'AE',

    link: function(scope, element, attrs){

      if(scope.$last){

        scope.$eval(attrs.onComplete);

      }
    }

  }
});

<强> CSS

.table-wrapper {
  position:relative;
  width: 100%;
}

table {
  width: 100%;
  table-layout: fixed;
  min-height: 500px;
}

table tr td {
  border: 1px solid black;

}

.placeholder {
  text-align: center;
}

.overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background-color: rgba(0,0,0,0.5); /*dim the background*/
}

角度ng重复滤波器完成渲染事件

1 个答案: