Является ли $timeout все еще лучшей практикой для ожидания шаблона угловой директивы?

Шаблон проектирования нашей команды для ожидания отрисовки шаблона директивы заключается в том, чтобы обернуть наш код манипуляции DOM в $timeout (внутри функции ссылки директивы), который, как я знаю, когда-то был обычным шаблоном проектирования. Это все еще верно, или есть лучшие / более безопасные шаблоны дизайна, чтобы сделать это?

Пример паттерна находится в ECMAScript6: 

link: ($scope, $element) => {
  $timeout(() => {
     var domElementFromTemplate = $element.find('myDOMElement');
  } 
}
1 6
javascript angularjs typescript directive

1 ответ:

При попытке выбрать элемент, который доступен в DOM:

Это никогда не было лучшей практикой IMO, потому что нет необходимости создавать асинхронное поведение для синхронной функции выбора dom. Из-за угла .документация элемента должна выглядеть следующим образом: 

link: ($scope, $element) => {
    var domElementFromTemplate = $element.find('myDOMElement');
}

При попытке выбрать элемент, который должен быть отображен в вашей директиве:

Функция timeout должна избегать асинхронного поведения DOM-рендеринга, но IMO есть гораздо более эффективные подходы к решению этой проблемы:

Решение 1)

Другой подход заключается в получении состояния готовности документа, чтобы гарантировать, что элемент доступен в DOM, например: 

link: ($scope, $element) => {
    angular.element(document).ready(() => {
        var domElementFromTemplate = $element.find('myDOMElement');
    });
}

Решение 2)

Другой подход заключается в создании другой директивы для тех элементов, которые были отрисованы внутри директивы, например (myDOMElement), чтобы вообще избежать внедрения DOM. 
link: ($scope, $element) => {},
template: "<div some-other-child-directive></div>"

Решение 3)

Он должен быть намного лучше и аккуратнее. подход к созданию функции обратного вызова для обеспечения доступности элемента в DOM. Это может быть сделано с помощью ng-init="someCallback()" для запуска функций элемента.

Решение 4)

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

link: ($scope, $element) => {
    $timeout(() => {
        var domElementFromTemplate = $element.find('myDOMElement');
    }
}
4