Как я могу запустить директиву после завершения рендеринга dom?

У меня, казалось бы, простая проблема без очевидного (читая документацию Angular JS) решения.

У меня есть директива Angular JS, которая выполняет некоторые вычисления на основе высоты других элементов DOM для определения высоты контейнера в DOM.

Что-то похожее на это происходит внутри директивы:

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

Проблема в том, что при запуске директивы $('site-header')невозможно найти, возвращая пустой массив вместо элемента DOM, обернутого jQuery, который мне нужен.

Есть ли обратный вызов, который я могу использовать в своей директиве, который запускается только после загрузки DOM, и я могу получить доступ к другим элементам DOM через обычные запросы стиля селектора jQuery?

Это зависит от того, как построен ваш $ ('site-header').

Вы можете попробовать использовать $ timeout с нулевой задержкой. Что-то вроде:

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

Пояснения, как это работает: раз , два .

Не забудьте ввести $timeoutв свою директиву:

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

Вот как я это делаю:

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

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

});

Наверное, автору мой ответ больше не понадобится. Тем не менее, для полноты картины я считаю, что другие пользователи могут счесть это полезным. Лучшее и самое простое решение - использовать $(window).load()внутри тела возвращаемой функции. (В качестве альтернативы вы можете использовать document.ready. Это действительно зависит от того, нужны вам все изображения или нет).

По $timeoutмоему скромному мнению, использование - очень слабый вариант и в некоторых случаях может потерпеть неудачу.

Вот полный код, который я бы использовал:

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

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

есть ngcontentloadedмероприятие, думаю, вы можете его использовать

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

       }
   }
});

Если вы не можете использовать $ timeout из-за внешних ресурсов и не можете использовать директиву из-за конкретной проблемы с таймингом, используйте широковещательную рассылку.

Добавить $scope.$broadcast("variable_name_here");после завершения желаемого внешнего ресурса или длительного контроллера / директивы.

Затем добавьте ниже после загрузки внешнего ресурса.

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

Например, в обещании отложенного HTTP-запроса.

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

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

У меня была аналогичная проблема, и я хочу поделиться своим решением здесь.

У меня есть следующий HTML:

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

Проблема: в функции ссылки директивы родительского div я хотел jquery'ing дочернего div # sub. Но он просто дал мне пустой объект, потому что ng-include не завершил работу, когда выполнялась функция ссылки директивы. Итак, сначала я сделал грязный обходной путь с помощью $ timeout, который работал, но параметр задержки зависел от скорости клиента (никому это не нравится).

Работает, но грязно:

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

Вот чистое решение:

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

Может, это кому-то поможет.