Jak mogę uruchomić dyrektywę po zakończeniu renderowania domeny?

Mam pozornie prosty problem bez widocznego (czytając dokumentację Angular JS) rozwiązania.

Mam dyrektywę Angular JS, która wykonuje obliczenia na podstawie wysokości innych elementów DOM, aby zdefiniować wysokość kontenera w DOM.

Coś podobnego dzieje się w dyrektywie:

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

Problem polega na tym, że po uruchomieniu dyrektywy $('site-header')nie można jej znaleźć, zwracając pustą tablicę zamiast potrzebnego elementu DOM opakowanego w jQuery.

Czy istnieje wywołanie zwrotne, którego mogę użyć w ramach mojej dyrektywy, które działa dopiero po załadowaniu DOM i mogę uzyskać dostęp do innych elementów DOM za pośrednictwem zwykłych zapytań w stylu selektora jQuery?

Zależy to od tego, jak skonstruowany jest Twój $ ('site-header').

Możesz spróbować użyć $ timeout z 0 opóźnieniem. Coś jak:

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

Wyjaśnienia, jak to działa: raz , dwa .

Nie zapomnij wstrzyknąć $timeoutw swojej dyrektywie:

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

Oto jak to robię:

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

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

});

Prawdopodobnie autor nie będzie już potrzebował mojej odpowiedzi. Jednak ze względu na kompletność uważam, że inni użytkownicy mogą uznać to za przydatne. Najlepszym i najprostszym rozwiązaniem jest użycie $(window).load()wewnątrz treści zwracanej funkcji. (alternatywnie możesz użyć document.ready. To naprawdę zależy, czy potrzebujesz wszystkich obrazów, czy nie).

$timeoutMoim skromnym zdaniem używanie jest bardzo słabą opcją i w niektórych przypadkach może się nie powieść.

Oto pełny kod, którego użyłbym:

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

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

jest ngcontentloadedwydarzenie, myślę, że możesz to wykorzystać

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

       }
   }
});

Jeśli nie możesz użyć $ timeout ze względu na zasoby zewnętrzne i nie możesz użyć dyrektywy z powodu konkretnego problemu z synchronizacją, użyj emisji.

Dodaj $scope.$broadcast("variable_name_here"); po zakończeniu żądanego zasobu zewnętrznego lub długotrwałego kontrolera / dyrektywy.

Następnie dodaj poniższe po załadowaniu zasobu zewnętrznego.

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

Na przykład w obietnicy odroczonego żądania HTTP.

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

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

Miałem podobny problem i chcę podzielić się tutaj moim rozwiązaniem.

Mam następujący HTML:

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

Problem: W funkcji linkującej dyrektywy nadrzędnego div chciałem jzapytać o podrzędny div # sub. Ale to po prostu dało mi pusty obiekt, ponieważ ng-include nie skończył się, gdy uruchomiono funkcję link dyrektywy. Więc najpierw zrobiłem brudne obejście z $ timeout, który działał, ale parametr opóźnienia zależał od szybkości klienta (nikt tego nie lubi).

Działa, ale jest brudny:

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

Oto czyste rozwiązanie:

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

Może to komuś pomoże.