Calling a function when ng-repeat has finished

by 
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.$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>

More Related Contents:

  1. jQuery .live() vs .on() method for adding a click event after loading dynamic html
  2. Update Angular model after setting input value with jQuery
  3. Create a custom event in Java
  4. How to get evaluated attributes inside a custom directive
  5. How to add events to Controls created at runtime in Excel with VBA
  6. Javascript event handler with parameters
  7. AngularJs event to call after content is loaded
  8. iOS – forward all touches through a view
  9. AngularJS – Create a directive that uses ng-model
  10. Watch multiple $scope attributes
  11. Determine whether user clicking scrollbar or content (onclick for native scroll bar)
  12. Wait until Application.Calculate has finished
  13. Angular JS resizable div directive
  14. What’s the difference between Event Listeners & Handlers in Java?
  15. AngularJS: $viewContentLoaded fired before partial view appears
  16. VBA – Update Other Cells via User-Defined Function
  17. Angularjs autocomplete from $http
  18. How to catch printer event in python
  19. Handling Events for OLEObject CommandButtons created at Runtime
  20. What properties can I use with event.target?
  21. Backbone.js : change not firing on model.change()
  22. Understanding AngularJS ng-src
  23. How to capture process output asynchronously in powershell?
  24. How do I pass multiple attributes into an Angular.js attribute directive?
  25. GWT Custom Events
  26. AngularJS POST Fails: Response for preflight has invalid HTTP status code 404
  27. “No ‘Access-Control-Allow-Origin’ header is present on the requested resource” error for response from http://www.google.com/
  28. $apply already in progress error
  29. Prototype equivalent for jQuery live function
  30. Configure Spring Boot for SPA frontend

Leave a Comment