$timeout 仍然是等待 Angular 指令模板的最佳实践吗？

Question

我们团队等待指令模板呈现的设计模式是将我们的 DOM 操作代码包装在 $timeout 中（在指令的 link 函数内），我知道曾经是正常的设计模式。这仍然是正确的，还是有 better/safer 设计模式可以做到这一点？

模式示例在 ECMAScript6 中：

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

Answer 1

当您尝试 select 一个在 DOM 中可用的元素时：

IMO 从来都不是最佳实践，因为不需要为同步 dom select 函数创建异步行为。由于 angular.element documentation 它应该看起来像这样：

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

当您尝试 select 一个应该在您的指令中呈现的元素时：

超时函数应该避免 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');
    }
}

$timeout 仍然是等待 Angular 指令模板的最佳实践吗？

Is $timeout still best practice for waiting on Angular directive template?

javascript

directive

angularjs

typescript