Comment puis-je exécuter une directive une fois le rendu du dom terminé?

J'ai un problème apparemment simple sans solution apparente (en lisant la documentation Angular JS) .

J'ai une directive Angular JS qui effectue des calculs basés sur la hauteur d'autres éléments DOM pour définir la hauteur d'un conteneur dans le DOM.

Quelque chose de similaire se passe dans la directive:

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

Le problème est que lorsque la directive s'exécute, elle $('site-header')est introuvable, renvoyant un tableau vide au lieu de l'élément DOM enveloppé jQuery dont j'ai besoin.

Y a-t-il un rappel que je peux utiliser dans ma directive qui ne fonctionne qu'après le chargement du DOM et que je peux accéder à d'autres éléments DOM via les requêtes de style de sélecteur jQuery normales?

Cela dépend de la façon dont votre $ ('site-header') est construit.

Vous pouvez essayer d'utiliser $ timeout avec un délai de 0. Quelque chose comme:

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

Explications comment ça marche: un , deux .

N'oubliez pas d'injecter $timeoutdans votre directive:

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

Voici comment je le fais:

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

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

});

L'auteur n'aura probablement plus besoin de ma réponse. Pourtant, par souci d'exhaustivité, je pense que d'autres utilisateurs pourraient le trouver utile. La meilleure et la plus simple solution consiste à utiliser $(window).load()dans le corps de la fonction retournée. (vous pouvez également utiliserdocument.ready . Cela dépend vraiment si vous avez besoin de toutes les images ou non).

En utilisant $timeout à mon humble avis est une option très faible et peut échouer dans certains cas.

Voici le code complet que j'utiliserais:

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

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

il y a un ngcontentloadedévénement, je pense que tu peux l'utiliser

.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 vous ne pouvez pas utiliser $ timeout en raison de ressources externes et que vous ne pouvez pas utiliser une directive en raison d'un problème spécifique de synchronisation, utilisez la diffusion.

Ajoutez une $scope.$broadcast("variable_name_here");fois que la ressource externe souhaitée ou le contrôleur / directive de longue durée est terminé.

Ajoutez ensuite ce qui suit après le chargement de votre ressource externe.

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

Par exemple dans la promesse d'une requête HTTP différée.

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

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

J'ai eu un problème similaire et je souhaite partager ma solution ici.

J'ai le code HTML suivant:

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

Problème: Dans la fonction de liaison de la directive du div parent, je voulais lancer une requête sur le div # sub enfant. Mais cela m'a juste donné un objet vide car ng-include n'était pas terminé lorsque la fonction de liaison de la directive a été exécutée. J'ai donc d'abord fait une solution de contournement sale avec $ timeout, qui a fonctionné mais le paramètre de délai dépendait de la vitesse du client (personne n'aime ça).

Fonctionne mais sale:

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

Voici la solution propre:

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

Peut-être que ça aide quelqu'un.