Wie kann ich eine Direktive ausführen, nachdem der Dom das Rendern beendet hat?

Ich habe ein scheinbar einfaches Problem ohne offensichtliche Lösung (durch Lesen der Angular JS-Dokumente) .

Ich habe eine Angular JS-Direktive, die einige Berechnungen basierend auf der Höhe anderer DOM-Elemente durchführt, um die Höhe eines Containers im DOM zu definieren.

Ähnliches geschieht in der Richtlinie:

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

Das Problem ist , dass , wenn die Richtlinie ausgeführt wird , $('site-header')kann nicht gefunden werden, ein leeres Array zurückkehr anstelle des jQuery gewickelt DOM - Element ich brauche.

Gibt es einen Rückruf, den ich in meiner Direktive verwenden kann und der erst ausgeführt wird, nachdem das DOM geladen wurde, und über die normalen Abfragen im jQuery-Selektorstil auf andere DOM-Elemente zugreifen kann?

Es hängt davon ab, wie Ihr $ ('Site-Header') aufgebaut ist.

Sie können versuchen, $ timeout mit einer Verzögerung von 0 zu verwenden. Etwas wie:

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

Erklärungen, wie es funktioniert: eins , zwei .

Vergessen Sie nicht, $timeoutIhre Richtlinie einzufügen:

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

So mache ich das:

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

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

});

Wahrscheinlich braucht der Autor meine Antwort nicht mehr. Der Vollständigkeit halber denke ich jedoch, dass andere Benutzer es nützlich finden könnten. Die beste und einfachste Lösung besteht darin, $(window).load()die zurückgegebene Funktion im Hauptteil zu verwenden . (Alternativ können Sie verwenden document.ready. Es hängt wirklich davon ab, ob Sie alle Bilder benötigen oder nicht).

Die Verwendung ist $timeoutmeiner bescheidenen Meinung nach eine sehr schwache Option und kann in einigen Fällen fehlschlagen.

Hier ist der vollständige Code, den ich verwenden würde:

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

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

Es gibt ein ngcontentloadedEreignis, ich denke, Sie können es verwenden

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

       }
   }
});

Wenn Sie $ timeout aufgrund externer Ressourcen nicht verwenden können und aufgrund eines bestimmten Zeitproblems keine Direktive verwenden können, verwenden Sie Broadcast.

Hinzufügen, $scope.$broadcast("variable_name_here");nachdem die gewünschte externe Ressource oder lang laufende Steuerung / Direktive abgeschlossen wurde.

Fügen Sie dann das Folgende hinzu, nachdem Ihre externe Ressource geladen wurde.

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

Zum Beispiel im Versprechen einer verzögerten HTTP-Anfrage.

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

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

Ich hatte ein ähnliches Problem und möchte meine Lösung hier teilen.

Ich habe folgendes HTML:

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

Problem: In der Link-Funktion der Direktive des Eltern-Div wollte ich das Kind-Div # sub abfragen. Aber es gab mir nur ein leeres Objekt, weil ng-include nicht beendet war, als die Link-Funktion der Direktive ausgeführt wurde. Also habe ich zuerst eine schmutzige Problemumgehung mit $ timeout gemacht, die funktioniert hat, aber der Verzögerungsparameter hing von der Clientgeschwindigkeit ab (niemand mag das).

Funktioniert aber schmutzig:

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

Hier ist die saubere Lösung:

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

Vielleicht hilft es jemandem.