5

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?

Improve this question
1

3 Answers 3

Reset to default
2

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

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

Improve this answer

Comments

1

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']); });
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.