How can I run a directive after the dom has finished rendering

Question

I ve got a seemingly simple problem with no apparent  by reading the Angular JS docs  solution   I have got an Angular JS directive that does some calculations based on other DOM elements  height to define the height of a container in the DOM   Something similar to this is going on inside the directive   return function scope  element  attrs            main   height      site-header   height   -      site-footer   height          The issue is that when the directive runs     site-header   cannot be found  returning an empty array instead of the jQuery wrapped DOM element I need   Is there a callback that I can use within my directive that only runs after the DOM has been loaded and I can access other DOM elements via the normal jQuery selector style queries

User · Answer

I had the a similar problem and want to share my solution here.

I have the following HTML:

<div data-my-directive>
  <div id='sub' ng-include='includedFile.htm'></div>
</div>

Problem: In the link-function of directive of the parent div I wanted to jquery'ing the child div#sub. But it just gave me an empty object because ng-include hadn't finished when link function of directive ran. So first I made a dirty workaround with $timeout, which worked but the delay-parameter depended on client speed (nobody likes that).

Works but dirty:

app.directive('myDirective', [function () {
    var directive = {};
    directive.link = function (scope, element, attrs) {
        $timeout(function() {
            //very dirty cause of client-depending varying delay time 
            $('#sub').css(/*whatever*/);
        }, 350);
    };
    return directive;
}]);

Here's the clean solution:

app.directive('myDirective', [function () {
    var directive = {};
    directive.link = function (scope, element, attrs) {
        scope.$on('$includeContentLoaded', function() {
            //just happens in the moment when ng-included finished
            $('#sub').css(/*whatever*/);
        };
    };
    return directive;
}]);

Maybe it helps somebody.

User · Answer

there is a ngcontentloaded event  I think you can use it   directive  directiveExample   function       return          restrict   A          link  function scope  elem  attrs                      window      window                   init   function                        contentHeight   elem outerHeight                         do the things                                      window on  ngcontentloaded  init

User · Answer

If you can t use  timeout due to external resources and cant use a directive due to a specific issue with timing  use broadcast    Add  scope  broadcast  variable name here    after the desired external resource or long running controller directive has completed    Then add the below after your external resource has loaded     scope  on  variable name here   function           DOM manipulation here    jQuery  selector   height         For example in the promise of a deferred HTTP request    MyHttpService then function data       scope MyHttpReturnedImage   data image      scope  broadcast  imageLoaded          scope  on  imageLoaded   function        jQuery  img   height 80  width 80

User · Answer

It depends on how your    site-header   is constructed   You can try to use  timeout with 0 delay  Something like   return function scope  element  attrs         timeout function                main   height      site-header   height   -      site-footer   height                          Explanations how it works  one  two   Don t forget to inject  timeout in your directive     directive  sticky   function  timeout

User · Answer

Here is how I do it   app directive  example   function          return function scope  element  attrs            angular element document  ready function                       MANIPULATE THE DOM

User · Answer

Probably the author won t need my answer anymore  Still  for sake of completeness i feel other users might find it useful  The best and most simple solution is to use   window  load   inside the body of the returned function   alternatively you can use document ready  It really depends if you need all the images or not    Using  timeout in my humble opinion is a very weak option and may fail in some cases   Here is the complete code i d use    directive  directiveExample   function       return          restrict   A          link  function  scope   elem  attrs                 window  load function                         JS here

[jquery] How can I run a directive after the dom has finished rendering?

Examples related to jquery

Examples related to dom

Examples related to callback

Examples related to angularjs

Examples related to document-ready