Wie kann ich eine Direktive ausführen, nachdem das Dom mit dem Rendern fertig ist?

Ich habe ein scheinbar einfaches problem, mit keine offensichtliche (durch Lesen der Kantige JS-docs) Lösung.

Ich habe einen Angular JS-Richtlinie, die einige Berechnungen, die auf anderen DOM-Elementen' Höhe an, definieren Sie die Höhe von einem container in der DOM.

Etwas ähnliches Los ist in der Richtlinie:

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

Das Problem ist, wenn die Richtlinie ausgeführt wird, $('site-header') gefunden werden kann, wird die Rückgabe eines leeren Arrays statt der jQuery gewickelt DOM-element, die ich brauche.

Gibt es einen Rückruf, dass ich in meiner Richtlinie, der nur ausgeführt wird, nachdem das DOM geladen wurde und ich kann auf anderen DOM-Elemente über die normale jQuery-Selektor-Stil Abfragen?

InformationsquelleAutor der Frage Jannis | 2012-09-02

133

Es hängt davon ab, wie Ihre $('site-header') aufgebaut ist.

Können Sie versuchen, zu verwenden $timeout mit 0 Verzögerung. So etwas wie:
```
return function(scope, element, attrs) {
    $timeout(function(){
        $('.main').height( $('.site-header').height() -  $('.site-footer').height() );
    });        
}
```
Erklärungen, wie es funktioniert: ein zwei.

Vergessen Sie nicht, zu injizieren $timeout in Ihrer Richtlinie:
```
.directive('sticky', function($timeout)
```
InformationsquelleAutor der Antwort Artem Andreev

Hier ist, wie ich es mache:

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

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

});

InformationsquelleAutor der Antwort rjm226

38

Wahrscheinlich der Autor nicht brauchen, meine Antwort nicht mehr. Trotzdem, der Vollständigkeit halber habe ich das Gefühl andere Benutzer Sie nützlich finden könnten. Die beste und einfachste Lösung ist die Verwendung $(window).load() im inneren des Körpers von der Funktion zurückgegeben. (alternativ können Sie document.ready. Es hängt wirklich, wenn Sie müssen alle die Bilder oder nicht).

Mit $timeout meiner bescheidenen Meinung nach ist eine sehr schwache option und kann in einigen Fällen fehlschlagen.

Hier ist der komplette code, den ich verwenden würde:
```
.directive('directiveExample', function(){
   return {
       restrict: 'A',
       link: function($scope, $elem, attrs){

           $(window).load(function() {
               //...JS here...
           });
       }
   }
});
```
InformationsquelleAutor der Antwort jnardiello

es ist ein ngcontentloaded Veranstaltung, 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)

       }
   }
});

InformationsquelleAutor der Antwort sunderls

5

Wenn Sie nicht verwenden können, $timeout aufgrund von externen Ressourcen und cant verwenden Sie eine Richtlinie, durch die auf ein bestimmtes Problem mit dem timing, broadcast.

Hinzufügen $scope.$broadcast("variable_name_here"); nachdem die gewünschte externe Ressource oder lange laufen-controller/Richtlinie abgeschlossen hat.

Dann fügen Sie den unten nach Ihren externen Ressource geladen wurde.
```
$scope.$on("variable_name_here", function(){ 
   //DOM manipulation here
   jQuery('selector').height(); 
}
```
Beispielsweise in der Verheißung eines latenten HTTP-request.
```
MyHttpService.then(function(data){
   $scope.MyHttpReturnedImage = data.image;
   $scope.$broadcast("imageLoaded");
});

$scope.$on("imageLoaded", function(){ 
   jQuery('img').height(80).width(80); 
}
```
InformationsquelleAutor der Antwort JSV

Ich hatte ein ähnliches problem und meine Lösung hier.

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 parent-div, ich wollte jquery ' Ing das Kind div#sub. Aber es gab mir nur ein leeres Objekt, weil die ng-include nicht fertig war, wenn die link-Funktion der Direktive ran. So zuerst machte ich einen dirty workaround mit $timeout, was auch geklappt hat aber der delay-parameter hing auf client-Geschwindigkeit (mag niemand).

Funktioniert, aber dreckig:

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

Ist hier 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 jemanden.

InformationsquelleAutor der Antwort jaheraho

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.