У меня есть функция внутри моего углового контроллера, я хотел бы, чтобы эта функция запускалась на готовом документе, но я заметил, что angular запускает ее при создании dom.
function myController($scope)
{
$scope.init = function()
{
// I'd like to run this on document ready
}
$scope.init(); // doesn't work, loads my init before the page has completely loaded
}
Кто-нибудь знает, как я могу пойти по этому поводу?
javascript
angularjs
onload
foreyez
источник
источник
$document
чтобы использовать это.angular.element
работает из коробки.document
является глобальной переменной, где as$document
вводится под углом и, таким образом, облегчает тестирование. В общем, сложно тестировать приложения, которые обращаются к глобальным переменным JS, таким как документ или окно. Я также думаю, чтоmodule.run
это хорошее место, чтобы поместить этот код вместо контроллера.Смотрите этот пост Как выполнить функцию углового контроллера при загрузке страницы?
Для быстрого поиска:
Таким образом, вам не нужно ждать, пока документ будет готов.
источник
https://docs.angularjs.org/guide/bootstrap
Это означает, что код контроллера будет запущен после того, как DOM будет готов.
Таким образом, это просто
$scope.init()
.источник
DOMContentLoaded
запускается, когда документ полностью загружен и проанализирован, не дожидаясь окончания загрузки таблиц стилей, изображений и подкадров. Для получения дополнительной информации см. В чем разница между DOMContentLoaded и событиями загрузки? ,Angular имеет несколько временных точек для начала выполнения функций. Если вы ищете что-то вроде jQuery's
Вы можете найти этот аналог в угловой очень полезным:
Это полезно, когда вы хотите манипулировать элементами DOM. Он начнет выполняться только после загрузки всех элементов te.
UPD: сказанное выше работает, когда вы хотите изменить свойства CSS. Однако иногда это не работает, когда вы хотите измерить свойства элемента, такие как ширина, высота и т. Д. В этом случае вы можете попробовать это:
источник
У меня была похожая ситуация, когда мне нужно было выполнить функцию контроллера после загрузки представления, а также после загрузки, инициализации определенного стороннего компонента в представлении и размещения ссылки на себя в $ scope. В итоге мне удалось настроить наблюдение за этим свойством области и запускать мою функцию только после ее инициализации.
Наблюдатель вызывается пару раз с неопределенными значениями. Затем, когда сетка создана и имеет ожидаемое свойство, функцию инициализации можно безопасно вызывать. При первом вызове наблюдателя с неопределенным значением newValue oldValue по-прежнему будет неопределенным.
источник
Вот моя попытка внутри внешнего контроллера с использованием coffeescript. Это работает довольно хорошо. Обратите внимание, что settings.screen.xs | sm | md | lg - это статические значения, определенные в необъявленном файле, который я включаю в приложение. Значения соответствуют официальным контрольным точкам Bootstrap 3 для размеров одноименных медиазапросов:
источник
Ответ
единственный, который работает в большинстве сценариев, которые я тестировал. На образце страницы с 4 компонентами, каждый из которых строит HTML из шаблона, порядок событий был
Таким образом, $ document.ready () в большинстве случаев бесполезен, так как DOM, построенный в угловом формате, может быть далеко не готов.
Но что более интересно, даже после запуска $ viewContentLoaded интересующий элемент все еще не может быть найден.
Только после выполнения таймаута $ он был найден. Обратите внимание, что, хотя значение $ timeout было равно 0, до его выполнения прошло около 200 миллисекунд, что указывает на то, что этот поток удерживался довольно долго, предположительно, в то время как в DOM были добавлены угловые шаблоны в основной поток. Общее время от первого выполнения $ document.ready () до последнего выполнения $ timeout составило почти 500 миллисекунд.
В одном необычном случае, когда было установлено значение компонента, а затем значение text () было изменено позже в $ timeout, значение $ timeout нужно было увеличивать до тех пор, пока оно не заработало (даже если элемент можно было найти во время $ timeout ). Что-то асинхронное в стороннем компоненте заставило значение иметь приоритет над текстом, пока не прошло достаточно времени. Другая возможность - это $ scope. $ EvalAsync, но она не была опробована.
Я все еще ищу одно событие, которое говорит мне, что DOM полностью остановился и им можно манипулировать, чтобы все случаи работали. Пока что необходимо произвольное значение тайм-аута, то есть в лучшем случае это кладжа, которая может не работать в медленном браузере. Я не пробовал варианты JQuery, такие как liveQuery и публикация / подписка, которые могут работать, но, конечно, не являются чисто угловатыми.
источник
Если вы получаете что-то вроде этого
getElementById call returns null
, это, вероятно, потому, что функция работает, но идентификатор не успел загрузить в DOM.Попробуйте использовать ответ Уилла (к началу) с задержкой. Пример:
источник
Почему бы не попробовать с какими угловыми документами упомянуть https://docs.angularjs.org/api/ng/function/angular.element .
Я использовал это внутри моей функции $ onInit () {...}.
Это сработало для меня.
источник
источник