AngularJS : Comment puis-je exécuter une directive après que le dom a fini de rendu ?

Question

J'ai un problème apparemment simple sans apparente (par la lecture de la Angular JS docs) solution.

J'ai une Angular JS directive qui n'quelques calculs basés sur d'autres éléments du DOM' hauteur de définir la hauteur d'un conteneur dans les DOM.

Quelque chose de semblable à ce qui se passe à l'intérieur de 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, $('site-header') ne peut pas être trouvé, en retournant un tableau vide au lieu de le jQuery, enveloppé de l'élément DOM dont j'ai besoin.

Est-il un rappel que je peux utiliser dans mon directive qui fonctionne uniquement après que le DOM est chargé et je peux accéder à d'autres éléments du DOM via la normale sélecteur jQuery style des requêtes?

Toute aide serait grandement appréciée.

Answer 1

Cela dépend de comment votre $('site-header') est construite.

Vous pouvez essayer d’utiliser $timeout avec un retard de 0. Quelque chose comme :

Explications, comment ça marche : un, deux.

Answer 2

Voici comment faire :

Answer 3

Sans doute l'auteur n'aurez pas besoin de ma réponse plus. Encore, par souci d'exhaustivité, je me sens d'autres utilisateurs pourraient trouver utile. La meilleure et la plus simple solution consiste à utiliser $(window).load() à l'intérieur du corps de la fonction renvoyée. (alternativement, vous pouvez utiliser document.ready. Cela dépend vraiment si vous avez besoin de toutes les images ou pas).

À l'aide de $timeout , à mon humble avis est très faible option et peut échouer dans certains cas.

Voici le code complet que j'avais utiliser:

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

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

Answer 4

Il y a un `` événement, je pense que vous pouvez l’utiliser

Answer 5

Si vous ne pouvez pas utiliser $timeout due à des ressources externes et ne peut pas utiliser une directive en raison d’un problème spécifique avec un timing, utiliser la diffusion.

Ajouter `` fois la ressource externe désirée ou contrôleur de longue durée/directive terminée.

Puis ajoutez la ci-dessous après votre ressource externe est chargé.

Par exemple dans la promesse d’une demande HTTP différée.