call a function when all ng-repeats are rendered

Question

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 1

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).

Answer 2

You should create a directive and include the directive into Your ng-repeat element.

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

Then when the class element saveprogram is created and loaded the directive will do the job. That's the purpose of the directives: attach new behavior to a specific element, that I understood is what You want.

Answer 3

Keeping with jQuery style event registrations, you could use...

$window.onload = function(){
    $('document').on('click', '.saveprogram', function(){
         // handle the click event here
         // this will be the clicked element
    })
}

Substituting the event you would like to handle.

You'll only need to do this once and you won't have to wait until the `ng-repeat finishes rendering

Answer 4

The proper angular approach is to use built in event directives like ng-click.

Whatever you do in that event handler in controller would then update scope model and server if needed

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

if you need to use a plugin on those elements then create a custom directive where each element is exposed as jQuery object when jQuery is included in page before angular

Answer 5

Well, I don't know what's your purpose to do this, but for sure you don't need to create a directive for this. You could create a function and call it in every $last element of ngRepeat, then increment a variable and when it becomes 3, you can do what you want, this way:

ng-init="$last && increment()"

Here's a demonstration:

(function() {
  "use strict";
  angular.module('app', [])
    .controller('mainCtrl', function($scope) {
      $scope.items = [];
      for (var i = 1; i <= 50; i++) {
        $scope.items.push('Item ' + i);
      }

      var inc = 0;
      $scope.increment = function() {
        inc++;
        if (inc == 3) {
          // do something
          console.log(inc);
        }
      }
    });

})();

<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>

<body ng-controller="mainCtrl">
  <div ng-repeat="item in items" ng-init="$last && increment()">
    <div class="saveprogram">save program</div>
  </div>
  <div ng-repeat="item in items" ng-init="$last && increment()">
    <div class="saveprogram">save program</div>
  </div>
  <div ng-repeat="item in items" ng-init="$last && increment()">
    <div class="saveprogram">save program</div>
  </div>
</body>

</html>