Como posso executar uma diretiva depois que o dom terminar de renderizar?

Eu tenho um problema aparentemente simples, sem solução aparente (lendo a documentação Angular JS) .

Eu tenho uma diretiva Angular JS que faz alguns cálculos com base na altura de outros elementos DOM para definir a altura de um contêiner no DOM.

Algo semelhante a isso está acontecendo dentro da diretiva:

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

O problema é que, quando a diretiva é executada, $('site-header')não pode ser encontrada, retornando um array vazio em vez do elemento DOM empacotado do jQuery de que preciso.

Existe um retorno de chamada que eu possa usar dentro da minha diretiva que só é executado depois que o DOM foi carregado e eu posso acessar outros elementos do DOM por meio das consultas de estilo do seletor jQuery normais?

Depende de como seu $ ('cabeçalho do site') é construído.

Você pode tentar usar $ timeout com 0 atraso. Algo como:

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

Explicações de como funciona: um , dois .

Não se esqueça de injetar $timeoutem sua diretiva:

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

É assim que eu faço:

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

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

});

Provavelmente o autor não precisará mais da minha resposta. Ainda assim, para sermos completos, acho que outros usuários podem considerá-lo útil. A melhor e mais simples solução é usar $(window).load()dentro do corpo da função retornada. (como alternativa, você pode usar document.ready. Realmente depende se você precisa de todas as imagens ou não).

Usar, $timeoutna minha humilde opinião, é uma opção muito fraca e pode falhar em alguns casos.

Aqui está o código completo que eu usaria:

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

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

há um ngcontentloadedevento, acho que você pode usá-lo

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

       }
   }
});

Se você não pode usar $ timeout devido a recursos externos e não pode usar uma diretiva devido a um problema específico de tempo, use broadcast.

Adicione $scope.$broadcast("variable_name_here");após a conclusão do recurso externo desejado ou do controlador / diretiva de longa duração.

Em seguida, adicione o seguinte depois que seu recurso externo for carregado.

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

Por exemplo, na promessa de uma solicitação HTTP adiada.

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

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

Eu tive um problema semelhante e quero compartilhar minha solução aqui.

Eu tenho o seguinte HTML:

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

Problema: Na função de link da diretiva do div pai, eu queria jquery'ing o div filho # sub. Mas ele apenas me deu um objeto vazio porque o ng-include não tinha terminado quando a função de link da diretiva foi executada. Então, primeiro fiz uma solução suja com $ timeout, que funcionou, mas o parâmetro de atraso dependia da velocidade do cliente (ninguém gosta disso).

Funciona mas está sujo:

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

Aqui está a solução limpa:

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

Talvez ajude alguém.