Come posso eseguire una direttiva dopo che il dom ha terminato il rendering?

Ho un problema apparentemente semplice senza soluzione apparente (leggendo i documenti di Angular JS) .

Ho una direttiva JS angolare che esegue alcuni calcoli basati sull'altezza di altri elementi DOM per definire l'altezza di un contenitore nel DOM.

Qualcosa di simile a questo sta accadendo all'interno della direttiva:

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

Il problema è che quando la direttiva viene eseguita, $('site-header')non può essere trovata, restituendo un array vuoto invece dell'elemento DOM avvolto in jQuery di cui ho bisogno.

C'è un callback che posso usare all'interno della mia direttiva che viene eseguito solo dopo che il DOM è stato caricato e posso accedere ad altri elementi DOM tramite le normali query in stile selettore jQuery?

Dipende da come è costruito il tuo $ ('site-header').

Puoi provare a usare $ timeout con 0 ritardo. Qualcosa di simile a:

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

Spiegazioni su come funziona: uno , due .

Non dimenticare di iniettare $timeoutnella tua direttiva:

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

Ecco come lo faccio:

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

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

});

Probabilmente l'autore non avrà più bisogno della mia risposta. Tuttavia, per ragioni di completezza, ritengo che altri utenti potrebbero trovarlo utile. La soluzione migliore e più semplice è usare $(window).load()all'interno del corpo della funzione restituita. (in alternativa puoi usare document.ready. Dipende davvero se hai bisogno di tutte le immagini o meno).

L'utilizzo $timeouta mio modesto parere è un'opzione molto debole e in alcuni casi potrebbe non funzionare.

Ecco il codice completo che userei:

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

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

c'è un ngcontentloadedevento, penso che tu possa 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)

       }
   }
});

Se non puoi usare $ timeout a causa di risorse esterne e non puoi usare una direttiva a causa di un problema specifico con la temporizzazione, usa broadcast.

Inserisci $scope.$broadcast("variable_name_here"); dopo il completamento della risorsa esterna desiderata o del controller / direttiva a esecuzione prolungata.

Quindi aggiungi quanto segue dopo che la tua risorsa esterna è stata caricata.

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

Ad esempio nella promessa di una richiesta HTTP differita.

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

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

Ho avuto un problema simile e voglio condividere la mia soluzione qui.

Ho il seguente codice HTML:

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

Problema: nella funzione di collegamento della direttiva del div genitore volevo jquery'ing il sub div # sub. Ma mi ha dato un oggetto vuoto perché ng-include non era terminato quando è stata eseguita la funzione link della direttiva. Quindi prima ho fatto una soluzione alternativa con $ timeout, che ha funzionato ma il parametro delay dipendeva dalla velocità del client (a nessuno piace).

Funziona ma sporco:

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

Ecco la soluzione pulita:

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

Forse aiuta qualcuno.