Question

我可以在ng-repeat第一次完成后触发一个事件。但是，我无法在每次ng-repeat后始终触发事件。如果ng-repeat是先前ng-repeat数据的子集，则似乎不会发生事件。

我找到this回答，它使用过滤器为这个问题提供了一个hacky解决方案。有没有人知道在每次 ng-repeat完成后发生事件的更好方法？

var app = angular.module('appname', []);

app.controller('Ctrl', function($scope) {
  $scope.data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
  $scope.limit = 11;
  
  $scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent){
		alert('Repeat Finished!');
  });
});

app.directive('onFinishRender', function(){
  return function(scope, element, attr){
    if(scope.$last){
      scope.$emit('ngRepeatFinished');
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div ng-app="appname" ng-controller="Ctrl">
  <select ng-model="limit">
    <option ng-repeat="o in data"value="{{o}}">{{o}}</option>
  </select>
  <ul>
    <li ng-repeat="x in data | limitTo: limit" on-finish-render>{{x}}</li>
  </ul>
</div>

Answer 1

$ last事件未被触发的原因是因为提高了性能ng-repeat实际上没有重新渲染元素，因为已经存在。正如您在每次增加限制时都会注意到当前的代码$ last事件被触发但是当它减少时它不会因为ng-repeat没有重新渲染这些元素。

由于ng-repeat没有强制重新出现的选项，因此观察极限变量并检查ng-repeat $ index是否等于极限（然后我们知道我们在最后元素）然后解雇事件。

我更新了你的指令：

.directive('onFinishRender', function($http) {
    return {
        restrict:'A',
        link:function(scope,element,attr){
            scope.$watch('limit', function() {
              if(scope.$index === scope.limit-1) {
                scope.$emit('ngRepeatFinished');
              }
            })
        }
    };
});

当然，由于我们正在使用数组索引，因此我们在限制上执行-1。

与所有$ watch一样，你应该将这些保持在最低限度，这一切都取决于你的应用程序，如果它是你可以接受的性能下降。

ng-repeat在数组的子集上完成后动态触发事件

1 个答案: