У меня, казалось бы, простая проблема без очевидного (читая документацию 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 с нулевой задержкой. Что-то вроде:
Пояснения, как это работает: раз , два .
Не забудьте ввести
$timeout
в свою директиву:источник
$timeout
в директиву. Doh. Теперь все работает, ура.$timeout
к такой директиве:.directive('sticky', function($timeout) { return function (scope, element, attrs, controller) { $timeout(function(){ }); }); };
Вот как я это делаю:
источник
element.ready(function(){
Наверное, автору мой ответ больше не понадобится. Тем не менее, для полноты картины я считаю, что другие пользователи могут счесть это полезным. Лучшее и самое простое решение - использовать
$(window).load()
внутри тела возвращаемой функции. (В качестве альтернативы вы можете использоватьdocument.ready
. Это действительно зависит от того, нужны вам все изображения или нет).По
$timeout
моему скромному мнению, использование - очень слабый вариант и в некоторых случаях может потерпеть неудачу.Вот полный код, который я бы использовал:
источник
есть
ngcontentloaded
мероприятие, думаю, вы можете его использоватьисточник
$ $window
делает?Если вы не можете использовать $ timeout из-за внешних ресурсов и не можете использовать директиву из-за конкретной проблемы с таймингом, используйте широковещательную рассылку.
Добавить
$scope.$broadcast("variable_name_here");
после завершения желаемого внешнего ресурса или длительного контроллера / директивы.Затем добавьте ниже после загрузки внешнего ресурса.
Например, в обещании отложенного HTTP-запроса.
источник
У меня была аналогичная проблема, и я хочу поделиться своим решением здесь.
У меня есть следующий HTML:
Проблема: в функции ссылки директивы родительского div я хотел jquery'ing дочернего div # sub. Но он просто дал мне пустой объект, потому что ng-include не завершил работу, когда выполнялась функция ссылки директивы. Итак, сначала я сделал грязный обходной путь с помощью $ timeout, который работал, но параметр задержки зависел от скорости клиента (никому это не нравится).
Работает, но грязно:
Вот чистое решение:
Может, это кому-то поможет.
источник