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');
        });
      }
    }
  }
});Code language: PHP (php)

Add directive to ng-repeat

<div ng-repeat="result in results" on-finish-render="ngRepeatFinished">
	...
</div>Code language: HTML, XML (xml)

Watch for the finish

$scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent) {
	// Do anything
});Code language: PHP (php)

More discussion on Stack Overflow

Comments

  1. Thank you

    But I have a question, when I click on “ui-sref” and go to the next page and back again, the jquery not working again.

    do you know why?

    1. There’s no jQuery in my code snippet from the post.

      Usually when you click the back button you might have a cached version of the page. Maybe that’s the issue.

      Good luck

  2. hi rick,
    im late to this party. I use something similar in my template.

    
    <div ng-repeat=""  ... data-whatever="{{alias.process_fn($last)}} ...
    
    then in the controller
    this.process_fn = function(lst){
    if(lst !== true) return;
    
    //if it gets through process
    Code language: HTML, XML (xml)

    is found this because i was looking for an “angularjs” way to do this. do you know of any?

  3. Having a similar kind of issue, input type “date” is not working on an older version of Firefox, I used a function to run date but it’s not working in this case

     
    $(window).bind('load', function() {
        webshims.setOptions('forms-ext', {types: 'date'});
        webshims.polyfill('forms forms-ext');
    });
     Code language: JavaScript (javascript)
      
    {{knowYourPcData.teacherName}}
    <!-- 42/66  -->
     Code language: HTML, XML (xml)
  4. error on line $scope.$on(‘ngRepeatFinished’, function(ngRepeatFinishedEvent) {

    “Uncaught ReferenceError: $scope is not defined”

    Please help!

Leave a Reply

Your email address will not be published. Required fields are marked *