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

Question

我们团队等待指令模板呈现的设计模式是将我们的 DOM 操作代码包装在 $timeout 中(在指令的链接函数内)，我曾经知道这是正常的设计模式。这仍然是正确的，还是有更好/更安全的设计模式来做到这一点？

模式示例在 ECMAScript6 中:

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

Answer 1

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

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

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 注入(inject)。

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');
    }
}