Angular.js ng-repeat callback

Question

I need to send a callback when ng-repeat finishes, but my solutions don't work. In my last solution I used a directive to do it.

Markup:

<div class="results" ng-model="results">
    <div class="empl-card" ng-repeat="empl in employees | filter: searchQuery" callback-on-end="alert('callback')">
    ...
    </div>
</div>

directive:

app.directive("callbackOnEnd", function() {
    return {
        restrict: "A",
        link: function(scope, element, attrs) {
            if (scope.$last) {
                scope.$eval(attrs.callbackOnEnd);
            }
        }
    };
});

Where could I have made a mistake?

This should help you http://markdalgleish.com/2013/06/using-promises-in-angularjs-views/ http://www.nodewiz.biz/angular-js-final-callback-after-ng-repeat/ — Thillai Narayanan, Jun 22 '16 at 12:43

score 2 · Answer 1 · answered Jun 22 '16 at 11:56

I think you can do this with just ngInit as follows;

<div class="results" ng-model="results">
  <div class="empl-card" ng-repeat="empl in employees | filter: searchQuery" ng-init="$last && alert('callback')">
    ...
  </div>
</div>

You don't need a custom directive for doing this.

score 1 · Accepted Answer · edited May 23 '17 at 11:53

To achieve this you need to make a method in your controller and call that method when the ng-repeat ends :

(function() {

  angular.element(document).ready(function() {
    var app = angular.module('myApp', []);

    app.controller("MyCtrl", function($scope, $timeout) {

      $scope.names = ['A', 'B', 'C', 'D'];

      $scope.onEnd = function() {
        alert('all done');
      };

    });

    app.directive("callbackOnEnd", function() {
      return {
        restrict: "A",
        link: function(scope, element, attrs) {
          if (scope.$last) {
            scope.$eval(attrs.callbackOnEnd);
          }
        }
      };
    });

    angular.bootstrap(document, ['myApp']);
  });


}());

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="MyCtrl" class="well">
  <h3 ng-repeat="name in names" callback-on-end="onEnd()">{{name}}</h3>
</div>

Or you will have to eval the javascript code

app.directive("callbackOnEnd", function() {
    return {
        restrict: "A",
        link: function(scope, element, attrs) {
            if (scope.$last) {
                eval(attrs.callbackOnEnd);
            }
        }
    };
});

(function() {

  angular.element(document).ready(function() {
    var app = angular.module('myApp', []);

    app.controller("MyCtrl", function($scope, $timeout) {

      $scope.names = ['A', 'B', 'C', 'D'];

      $scope.onEnd = function() {
        alert('all done');
      };

    });

    app.directive("callbackOnEnd", function() {
      return {
        restrict: "A",
        link: function(scope, element, attrs) {
          if (scope.$last) {
            eval(attrs.callbackOnEnd);
          }
        }
      };
    });

    angular.bootstrap(document, ['myApp']);
  });


}());

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="MyCtrl" class="well">
  <h3 ng-repeat="name in names" callback-on-end="alert('done')">{{name}}</h3>
</div>

Find good explanation here : https://stackoverflow.com/a/15671573/3603806

score 1 · Answer 3 · answered Jun 22 '16 at 12:32

Check here. Created custom directive for repeatEnd http://plnkr.co/edit/YhGzYFOcVaVds7iAEWPn?p=preview

<h3 ng-repeat="name in names" repeat-end="onEnd()">{{name}}</h3>

app.js

angular.element(document).ready(function() {
    var app = angular.module('repApp', []);

    app.controller("MainCtrl", function($scope, $timeout) {

        $scope.names = ['user1', 'user2', 'user3'];

        $scope.onEnd = function() {
            $timeout(function() {
                alert('all done');
            }, 1);
        };

    });

    app.directive("repeatEnd", function() {
        return {
            restrict: "A",
            link: function(scope, element, attrs) {
                if (scope.$last) {
                    scope.$eval(attrs.repeatEnd);
                }
            }
        };
    });

    angular.bootstrap(document, ['repApp']);
});

Angular.js ng-repeat callback

3 Answers3