Як я можу запустити директиву після того, як dom закінчить надання?

У мене, здавалося б, проста проблема, без очевидних (читання документів Angular JS) .

У мене є кутова директива JS, яка робить деякі обчислення на основі висоти інших елементів DOM для визначення висоти контейнера в DOM.

Щось подібне до цього відбувається всередині директиви:

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

Проблема полягає в тому, що, коли директива працює, $('site-header') її неможливо знайти, повертаючи порожній масив замість потрібного мені елемента JOMu обернутий DOM.

Чи є зворотний дзвінок, який я можу використовувати в межах своєї директиви, яка працює лише після завантаження DOM, і я можу отримати доступ до інших елементів DOM за допомогою звичайних запитів стилю вибору jQuery?

Це залежить від того, як побудовано ваш $ ('site-header').

Ви можете спробувати використовувати $ timeout із затримкою 0. Щось на зразок:

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>

Проблема: У функції посилання директиви батьківського діва я хотів 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;
}]);

Можливо, це комусь допомагає.