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


Leave a Reply

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