¿Cómo puedo ejecutar una directiva después de que el dom haya terminado de renderizarse?

Tengo un problema aparentemente simple sin una solución aparente (al leer los documentos de Angular JS) .

Tengo una directiva Angular JS que hace algunos cálculos basados ​​en la altura de otros elementos DOM para definir la altura de un contenedor en el DOM.

Algo similar a esto está sucediendo dentro de la directiva:

return function(scope, element, attrs) {
    $('.main').height( $('.site-header').height() -  $('.site-footer').height() );
}

El problema es que cuando se ejecuta la directiva, $('site-header')no se puede encontrar, devolviendo una matriz vacía en lugar del elemento DOM envuelto con jQuery que necesito.

¿Hay una devolución de llamada que pueda usar dentro de mi directiva que solo se ejecute después de que se haya cargado el DOM y pueda acceder a otros elementos del DOM a través de las consultas de estilo del selector de jQuery normal?

Depende de cómo esté construido su $ ('site-header').

Puede intentar usar $ timeout con 0 retraso. Algo como:

return function(scope, element, attrs) {
    $timeout(function(){
        $('.main').height( $('.site-header').height() -  $('.site-footer').height() );
    });        
}

Explicaciones de cómo funciona: uno , dos .

No olvide inyectar $timeoutsu directiva:

.directive('sticky', function($timeout)

Así es como lo hago:

app.directive('example', function() {

    return function(scope, element, attrs) {
        angular.element(document).ready(function() {
                //MANIPULATE THE DOM
        });
    };

});

Probablemente el autor ya no necesite mi respuesta. Aún así, en aras de la integridad, creo que otros usuarios pueden encontrarlo útil. La mejor y más sencilla solución es utilizarla $(window).load()dentro del cuerpo de la función devuelta. (alternativamente puede usar document.ready. Realmente depende de si necesita todas las imágenes o no).

Usar, $timeouten mi humilde opinión, es una opción muy débil y puede fallar en algunos casos.

Aquí está el código completo que usaría:

.directive('directiveExample', function(){
   return {
       restrict: 'A',
       link: function($scope, $elem, attrs){

           $(window).load(function() {
               //...JS here...
           });
       }
   }
});

hay un ngcontentloadedevento, creo que puedes usarlo

.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)

       }
   }
});

Si no puede usar $ timeout debido a recursos externos y no puede usar una directiva debido a un problema específico con el tiempo, use broadcast.

Agregue $scope.$broadcast("variable_name_here");después de que se haya completado el recurso externo deseado o el controlador / directiva de larga ejecución.

Luego agregue lo siguiente después de que se haya cargado su recurso externo.

$scope.$on("variable_name_here", function(){ 
   // DOM manipulation here
   jQuery('selector').height(); 
}

Por ejemplo, en la promesa de una solicitud HTTP diferida.

MyHttpService.then(function(data){
   $scope.MyHttpReturnedImage = data.image;
   $scope.$broadcast("imageLoaded");
});

$scope.$on("imageLoaded", function(){ 
   jQuery('img').height(80).width(80); 
}

Tuve un problema similar y quiero compartir mi solución aquí.

Tengo el siguiente HTML:

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

Problema: En la función de enlace de la directiva del div principal, quería consultar el div # sub secundario. Pero solo me dio un objeto vacío porque ng-include no había terminado cuando se ejecutó la función de enlace de la directiva. Entonces, primero hice una solución sucia con $ timeout, que funcionó, pero el parámetro de retardo dependía de la velocidad del cliente (a nadie le gusta eso).

Funciona pero sucio:

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;
}]);

Aquí está la solución limpia:

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;
}]);

Quizás ayude a alguien.