Calling a function when ng-repeat has finished

Question

What I am trying to implement is basically a  on ng repeat finished rendering  handler  I am able to detect when it is done but I can t figure out how to trigger a function from it   Check the fiddle http   jsfiddle net paulocoelho BsMqq 3   JS  var module   angular module  testApp            directive  onFinishRender   function          return           restrict   A           link  function  scope  element  attr                if  scope  last     true                    element ready function                          console log  calling   attr onFinishRender                          CALL TEST HERE                                                         function myC  scope         scope ta    1  2  3  4  5  6       function test             console log  test executed              HTML   lt div ng-app  testApp  ng-controller  myC  gt       lt p ng-repeat  t in ta  on-finish-render  test    gt   t   lt  p gt   lt  div gt    Answer  Working fiddle from finishingmove  http   jsfiddle net paulocoelho BsMqq 4

User · Answer

If you need to call different functions for different ng-repeats on the same controller you can try something like this:

The directive:

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.broadcasteventname ? attr.broadcasteventname : 'ngRepeatFinished');
            });
            }
        }
    }
});

In your controller, catch events with $on:

$scope.$on('ngRepeatBroadcast1', function(ngRepeatFinishedEvent) {
// Do something
});

$scope.$on('ngRepeatBroadcast2', function(ngRepeatFinishedEvent) {
// Do something
});

In your template with multiple ng-repeat

<div ng-repeat="item in collection1" on-finish-render broadcasteventname="ngRepeatBroadcast1">
    <div>{{item.name}}}<div>
</div>

<div ng-repeat="item in collection2" on-finish-render broadcasteventname="ngRepeatBroadcast2">
    <div>{{item.name}}}<div>
</div>

User · Answer

Please have a look at the fiddle  http   jsfiddle net yNXS2   Since the directive you created didn t created a new scope i continued in the way    scope test   function       made that happen

User · Answer

The other solutions will work fine on initial page load  but calling  timeout from the controller is the only way to ensure that your function is called when the model changes  Here is a working fiddle that uses  timeout  For your example it would be    controller  myC   function   scope   timeout     scope  watch  ta   function  newValue  oldValue         timeout function             test                  ngRepeat will only evaluate a directive when the row content is new  so if you remove items from your list  onFinishRender will not fire  For example  try entering filter values in these fiddles emit

User · Answer

The answers that have been given so far will only work the first time that the ng-repeat gets rendered  but if you have a dynamic ng-repeat  meaning that you are going to be adding deleting filtering items  and you need to be notified every time that the ng-repeat gets rendered  those solutions won t work for you  So  if you need to be notified EVERY TIME that the ng-repeat gets re-rendered and not just the first time  I ve found a way to do that  it s quite  hacky   but it will work fine if you know what you are doing  Use this  filter in your ng-repeat before you use any other  filter   filter  ngRepeatFinish   function  timeout       return function data           var me   this          var flagProperty      finishedRendering             if  data flagProperty                Object defineProperty                  data                   flagProperty                    enumerable false  configurable true  writable  false  value                    timeout function                        delete data flagProperty                                               me  emit  ngRepeatFinished                      0 false                                     return data             This will  emit an event called ngRepeatFinished every time that the ng-repeat gets rendered  How to use it   lt li ng-repeat  quot item in  items ngRepeatFinish    filter  name namedFiltered  quot   gt   The ngRepeatFinish filter needs to be applied directly to an Array or an Object defined in your  scope  you can apply other filters after  How NOT to use it   lt li ng-repeat  quot item in  items   filter  name namedFiltered     ngRepeatFinish quot   gt   Do not apply other filters first and then apply the ngRepeatFinish filter  When should I use this  If you want to apply certain css styles into the DOM after the list has finished rendering  because you need to have into account the new dimensions of the DOM elements that have been re-rendered by the ng-repeat   BTW  those kind of operations should be done inside a directive  What NOT TO DO in the function that handles the ngRepeatFinished event   Do not perform a  scope  apply in that function or you will put Angular in an endless loop that Angular won t be able to detect   Do not use it for making changes in the  scope properties  because those changes won t be reflected in your view until the next  digest loop  and since you can t perform an  scope  apply they won t be of any use     quot But filters are not meant to be used like that   quot  No  they are not  this is a hack  if you don t like it don t use it  If you know a better way to accomplish the same thing please let me know it  Summarizing  This is a hack  and using it in the wrong way is dangerous  use it only for applying styles after the ng-repeat has finished rendering and you shouldn t have any issues

User · Answer

A solution for this problem with a filtered ngRepeat could have been with Mutation events  but they are deprecated  without immediate replacement    Then I thought of another easy one   app directive  filtered  function  timeout        return           restrict   A  link  function  scope element attr                var elm   element 0                   nodePrototype   Node prototype                  timeout                  slice   Array prototype slice                            elm insertBefore   alt bind null nodePrototype insertBefore               elm removeChild   alt bind null nodePrototype removeChild                function alt fn                   fn apply elm slice call arguments 1                    timeout amp  amp  timeout cancel timeout                   timeout    timeout altDone                              function altDone                    timeout   null                  console log  Filtered     fire an event or something                                         This hooks into the Node prototype methods of the parent element with a one-tick  timeout to watch for successive modifications   It works mostly correct but I did get some cases where the altDone would be called twice   Again    add this directive to the parent of the ngRepeat

User · Answer

Use  evalAsync if you want your callback  i e   test    to be executed after the DOM is constructed  but before the browser renders   This will prevent flicker -- ref   if  scope  last       scope  evalAsync attr onFinishRender       Fiddle   If you really want to call your callback after rendering  use  timeout   if  scope  last        timeout function            scope  eval attr onFinishRender              I prefer  eval instead of an event   With an event  we need to know the name of the event and add code to our controller for that event   With  eval  there is less coupling between the controller and the directive

User · Answer

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    lt div ng-repeat  item in items  on-finish-render  ngRepeatFinished  gt       lt div gt   item name    lt div gt   lt  div gt

User · Answer

I m very surprised not to see the most simple solution among the answers to this question  What you want to do is add an ngInit directive on your repeated element  the element with the ngRepeat directive  checking for  last  a special variable set in scope by ngRepeat which indicates that the repeated element is the last in the list   If  last is true  we re rendering the last element and we can call the function we want   ng-init   last  amp  amp  test      The complete code for your HTML markup would be    lt div ng-app  testApp  ng-controller  myC  gt       lt p ng-repeat  t in ta  ng-init   last  amp  amp  test    gt   t   lt  p gt   lt  div gt    You don t need any extra JS code in your app besides the scope function you want to call  in this case  test  since ngInit is provided by Angular js  Just make sure to have your test function in the scope so that it can be accessed from the template    scope test   function test         console log  test executed

User · Answer

Very easy  this is how I did it    x000D   x000D   directive  blockOnRender   function   blockUI    x000D      return   x000D          restrict   A   x000D          link  function  scope  element  attrs    x000D               x000D              if  scope  first    x000D                   blockUI blockElement   element  parent     x000D                x000D              if  scope  last    x000D                   blockUI unblockElement   element  parent     x000D                x000D            x000D         x000D     x000D   x000D   x000D

User · Answer

If you   re not averse to using double-dollar scope props and you   re writing a directive whose only content is a repeat  there is a pretty simple solution  assuming you only care about the initial render   In the link function   const dereg   scope  watch    childTail  last   last   gt        if  last            dereg               do yr stuff -- you may still need a  timeout here             This is useful for cases where you have a directive that needs to do DOM manip based on the widths or heights of the members of a rendered list  which I think is the most likely reason one would ask this question   but it   s not as generic as the other solutions that have been proposed

[events] Calling a function when ng-repeat has finished

Examples related to events

Examples related to angularjs

Examples related to handler

Examples related to directive

Examples related to ready