Trigger after ng-repeat has finished – Angular

If you need to trigger something after a ng-repeat has finished, you're in luck. The following custom directive will do exactly that.

In my case I had a third party jQuery plugin that wouldn't work if I triggered it after a document ready. Because the document ready was fired before the ng-repeat finished loading the data.

Add the directive to the element with the ng-repeat and see magic happen.

Create directive

directive('onFinishRender', function ($timeout) {
  return {
    restrict: 'A',
    link: function (scope, element, attr) {
      if (scope.$last === true) {
        $timeout(function () {
          scope.$emit('ngRepeatFinished');
        });
      }
    }
  }
});

Add directive to ng-repeat

<div ng-repeat="result in results" on-finish-render="ngRepeatFinished">
	...
</div>

Watch for the finish

$scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent) {
	// Do anything
});

More discussion on Stack Overflow

About Rick

Senior Front-end Software Engineer from Barcelona, Haidong Gumdo Instructor (korean martial art of the sword), street photographer, travel lover, TV addict, Boston Red Sox fan, and privacy advocate.
14 comments

Leave a Reply

Add <code> Some Code </code> by using this tags.

*
*