CODEWITHSUNDEEP
angularjsangularjs-directive
Robert Kusznier
Robert Kusznier

Reputation: 6911

AngularJS directive runs before element is fully loaded

I have a directive attached to a dynamically generated <table> element inside a template. The directive manipulates the DOM of that table inside a link function. The problem is that the directive runs before the table is rendered (by evaluating ng-repeat directives) - the table is empty then.

Question

How can I make sure that the directive is ran after the table has been fully rendered?

<table directive-name>
    <tr ng-repeat="...">
        <td ng-repeat="..."></td>
    </tr>
</table>


module.directive("directiveName", function() {
    return {
        scope: "A",
        link: function(scope, element, attributes) {
            /* I need to be sure that the table is already fully
               rendered when this code runs */
        }
    };
});

Upvotes: 13

Views: 12767

Answers (3)

bosch
bosch

Reputation: 1129

Try wrapping in a $timeout the code from your link function as it will execute after the DOM is rendered. 

$timeout(function () {
    //do your stuff here as the DOM has finished rendering already
});

Don't forget to inject $timeout in your directive:

.directive("directiveName", function($timeout) {

There are plenty of alternatives but I think this one is cleaner as the $timeout executes after the rendering engine has finished its job.

Upvotes: 6

Martin Seeler
Martin Seeler

Reputation: 6982

A clean way would be to use something like lodash's _.defer method.

You can call it with _.defer(your_func, your_func_arg1, your_func_arg2, ...) inside your link to execute the method, when the current call stack has cleared and everything is ready.

This way, you don't have to estimate a $timeout by yourself.

Upvotes: 0

New Dev
New Dev

Reputation: 49590

You can't, in a general sense, be ever "fully sure" by just having a directive on the <table> element.

But you can be sure in certain cases. In your case, if the inner content is ng-repeat-ed, then if the array of items over which ngRepeat works is ready, then the actual DOM elements will be ready at the end of the digest cycle. You can capture it after $timeout with 0 delay:

link: function(scope, element){
  $timeout(function(){
    console.log(element.find("tr").length); // will be > 0
  })
}

But, in a general sense, you can't be certain to capture the contents. What if the ngRepeated array is not there yet? Or what if there is an ng-include instead?

<table directive-name ng-include="'templates/tr.html'">
</table>

Or, what if there was a custom directive that worked differently than ngRepeat does?

But if you have full control of the contents, one possible way to know is to include some helper directive as the innermost/last element, and have it contact its parent directiveName when it's linked:

<table directive-name>
    <tr ng-repeat="...">
        <td ng-repeat="...">
          <directive-name-helper ng-if="$last">
        </td>
    </tr>
</table>

.directive("directiveNameHelper", function(){
  return {
    require: "?^directiveName",
    link: function(scope, element, attrs, ctrl){
      if (!ctrl) return;

      ctrl.notifyDone();
    }
  }
})

Upvotes: 6

Related Questions