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注入。

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指令模板的最佳做法吗？

1 个答案: