Calling a function when ng-repeat has finished

Question

What I am trying to implement is basically an "on ng-repeat finished rendering" handler. I am able to detect when it is done but I can't figure out how to trigger a function from it.

Check the fiddle:http://jsfiddle.net/paulocoelho/BsMqq/3/

JS

var module = angular.module('testApp', []) 

   .directive('onFinishRender', function () { 

         return { 

           restrict: 'A', 

           link: function (scope, element, attr) { 

             if (scope.$last === true) { 

                element.ready(function () { 

        console.log("calling:"+attr.onFinishRender); 

 // CALL TEST HERE! 

          }); 

        } 

     } 

  } 

});

function myC($scope) { 

     $scope.ta = [1, 2, 3, 4, 5, 6]; 

    function test() { 

       console.log("test executed"); 

    } 

 }

HTML

<div ng-app="testApp" ng-controller="myC"> 

<p ng-repeat="t in ta" on-finish-render="test()">{{t}}</p> 

</div>

Answer 1

For calling a function when ng-repeat has finished you can use the below mentioned code:-

var module = angular.module('testApp', []) 

  .directive('onFinishRender', function ($timeout) { 

        return { 

           restrict: 'A', 

           link: function (scope, element, attr) { 

               if (scope.$last === true) { 

                   $timeout(function () { 

                     scope.$emit(attr.onFinishRender); 

                    }); 

               } 

            } 

      } 

});

The controller code is:-

$scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent) {

//you also get the actual event object 

//do stuff, execute functions -- whatever... 

});

With HTML that looks something like this:

<div ng-repeat="item in items"on-finish-render="ngRepeatFinished"> 

     <div>{{item.name}}}<div> 

</div>