Calling a function when ng-repeat has finished

🎉 Calling a Function when ng-repeat has Finished Rendering! 🎉

So you want to know how to call a function when ng-repeat has finished rendering? Looks like you're in the right place! 🙌

The Challenge

Here's the thing, my friend. You're not alone on this one. Many developers have faced this exact issue. They want to perform some action or call a function once all the elements in the ng-repeat have been rendered on the page. But how the heck do we do that? 🤔

The Solution

Fear not, for I have the answers you seek! 💪 Here's a simple solution that will make your life a whole lot easier:

1. First, let's create a custom Angular directive, onFinishRender, that will handle our magic:

   var module = angular.module('testApp', []) .directive('onFinishRender', function () { return { restrict: 'A', link: function (scope, element, attr) { if (scope.$last === true) { element.ready(function () { // CALL YOUR FUNCTION HERE! console.log("calling:" + attr.onFinishRender); }); } } } });

2. Now, in your HTML, add the on-finish-render attribute to the element inside the ng-repeat:

   <div ng-app="testApp" ng-controller="myC"> <!-- Add the on-finish-render attribute and specify the function to call --> <p ng-repeat="t in ta" on-finish-render="test()">{{t}}</p> </div>

3. Finally, define your function in the controller. In this example, let's call it test():

   function myC($scope) { $scope.ta = [1, 2, 3, 4, 5, 6]; // Define your function here function test() { console.log("test executed"); } }

💡 Pro Tip!

If you want to take things up a notch and make your code cleaner and more reusable, you can pass arguments to your onFinishRender directive. For example:

<div ng-repeat="t in ta" on-finish-render="test(param1, param2)">{{t}}</div>

And in your directive:

// ...
link: function (scope, element, attr) {
    if (scope.$last === true) {
        element.ready(function () {
            // Get the function name and arguments from the directive attribute
            var fn = attr.onFinishRender.split('(')[0];
            var args = attr.onFinishRender.split('(')[1].split(')')[0].split(',');
            
            // CALL YOUR FUNCTION HERE!
            scope[fn].apply(null, args);
        });
    }
}
// ...

🚀 The Final Result

And there you go! 🎉 Now, your function will be called once all the elements in the ng-repeat have finished rendering. Test it out, see it in action, and impress your friends with your newfound knowledge! 🔥

Do you have any other questions or suggestions?

Feel free to leave a comment, share your thoughts, or let us know if you have any other tech challenges you'd like us to tackle next. We love hearing from you and helping you on your tech journey!

Happy coding! 😄