$ timeout是等待Angular指令模板的最佳做法吗？

Question

我们团队的等待指令模板渲染的设计模式是将我们的DOM操作代码包装在$timeout(在指令的链接函数中),我一度知道它是正常的设计模式.这仍然是真的,还是有更好/更安全的设计模式来做到这一点？

模式示例在ECMAScript6中:

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

Answer 1

当您尝试选择 DOM 中可用的元素时：

在我看来，这从来都不是最佳实践，因为不需要为同步 dom 选择函数创建异步行为。根据angular.element 文档，它应该如下所示：

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

当您尝试选择应该在指令中呈现的元素时：

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