Выполнение функции после полной готовности компонента

У меня есть компонент angularjs, в котором есть шаблон, контроллер, некоторые привязки, некоторые включенные части.

Я помещаю этот компонент в свой DOM вместе с его атрибутами:

<mycomponent attr1="x" attr2="y"></mycomponent>

Эти значения атрибутов будут использоваться контроллером компонента и/или в шаблоне компонента для включения куда-либо.

Мне нужно запустить функцию после того, как компонент был полностью создан, т. е. его шаблон был создан в DOM и всем включенным элементам было присвоено значение.

Как я могу это сделать? Я попытался поместить функцию в хук $postLink() контроллера, однако, когда срабатывает $postLink(), я вижу, что трансклюзия еще не запущена.

Кроме того, я не люблю возиться с контроллером компонента, так как компонент очень общий, я размещаю его в нескольких местах в DOM, и только ОДНО из них должно запускать эту функцию после его полного создания.


angularjs angularjs-components
person edoedoedo    schedule 21.09.2017    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Для приложения AngularJS 1 существует два способа запуска функции после инициализации DOM:

  1. Вы можете использовать $timeout без задержки - $timeout(function() { /* Вызов вашей функции */ });
  2. Или используйте .ready(), который предоставляется Angular jqLite
person ManishSingh    schedule 21.09.2017
comment
Я обнаружил, что это относится и к AngularJS 1. Нет никакого метода жизненного цикла или хука для использования. $onInit не гарантирует завершение загрузки представления компонента и дочерних представлений в пользовательском интерфейсе, а $viewContentLoaded не используется в компоненте. - person angtlin; 26.09.2018

arrow_upward
1
arrow_downward

В Angular 2:

ngAfterViewInit()

Ответить после того, как Angular инициализирует представления компонента и дочерние представления. Вызывается один раз после первого ngAfterContentChecked(). Хук только для компонентов.

в Jquery:

$( document ).ready(function() {
        console.log( "document loaded" );
    });

в javascript:

window.onload(function(){
//here
});

в angular1:

angular.element(document).ready(function () {
        //content here
    });
person Kunvar Singh    schedule 21.09.2017

arrow_upward
0
arrow_downward

Из параграфа "Компоненты имеют четко определенный жизненный цикл" в документах AngularJS. :

$postLink() — вызывается после того, как этот элемент контроллера и его дочерние элементы были связаны. Подобно функции post-link, этот хук можно использовать для настройки обработчиков событий DOM и прямых манипуляций с DOM. Обратите внимание, что дочерние элементы, содержащие директивы templateUrl, не будут скомпилированы и связаны, поскольку они ожидают асинхронной загрузки своего шаблона, а их собственная компиляция и связывание приостановлены до тех пор, пока это не произойдет. Этот хук можно считать аналогом хуков ngAfterViewInit и ngAfterContentInit в Angular 2. Поскольку процесс компиляции в Angular 1 довольно отличается, прямого сопоставления нет, и следует соблюдать осторожность. при обновлении.

person JohnDoenym    schedule 26.04.2019