Susheel Singh Susheel Singh - 4 months ago 8
Javascript Question

call a function when all ng-repeats are rendered

I have a code which makes an ajax call and gets a json object from which the ng-repeat's are rendered. Once this all is rendered I want to call a function which binds some events on rendered element.

<div ng-repeat="list in arr | filter: {DegreeName: 'xyz'}">
<div class="saveprogram">save program</div>
</div>
<div ng-repeat="list in arr | filter: {DegreeName: 'abc'}">
<div class="saveprogram">save program</div>
</div>
<div ng-repeat="list in arr | filter: {DegreeName: 'test'}">
<div class="saveprogram">save program</div>
</div>


Once all the above ng-repeat are rendered, I want to attach some events on it. I tried

$window.onload = function(){
//someevent
$(".saveprogram")
}


This works but it has some issues in IE.
Can someone help me with some directive which runs once all the ng-repeat are rendered


Note: I have gone through many posts and tried but that didn't help. I would have used ng-click but this is an existing code and very complex. It has lot of things in it. So I don't want to rewrite everyhing again. And calling function every time on ng-click I didnt find it good. I just want to run the function once, which does all bindings

Answer

Directive

You can just insert that code before your controller and it will work

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);
                });
            }
        }
    }
});

Notice that I didn't use .ready() but rather wrapped it in a $timeout. $timeout makes sure it's executed when the ng-repeated elements have REALLY finished rendering (because the $timeout will execute at the end of the current digest cycle -- and it will also call $apply internally, unlike setTimeout). So after the ng-repeat has finished, we use $emit to emit an event to outer scopes (sibling and parent scopes).

And then in your controller, you can catch it with $on:

$scope.counter = 0;
$scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent) {
    $scope.counter++;
    if($scope.counter == 3){
        //CallYourMethodHere()
        $scope.counter = 0;
    } 
});

With html that looks something like this:

<div ng-repeat="item in items" on-finish-render="ngRepeatFinished">
    <div>{{item.name}}}<div>
</div>

if directives are unclear for you, take a look on this docs:

https://docs.angularjs.org/guide/directive

Reference: Answere based on Calling a function when ng-repeat has finished Since the user already saw this answre but still with problems. (I just added the counter inside the controller).