Angular 何时向 DOM 添加指令模板？答案

【问题标题】：When does Angular add a directive template to the DOM?Angular 何时向 DOM 添加指令模板？
【发布时间】：2015-10-24 21:11:05
【问题描述】：

我需要使用假定完整 DOM 已准备好的 Javascript 库 (scrollReveal)。我目前正在使用 AngularJS。

问题是，我不知道什么时候通过初始化scrollReveal

window.sr = new scrollReveal();

如果我在一个指令的链接函数中这样做，它可能不适用于另一个指令的模板，因为另一个模板可能还没有添加到 DOM 中。

所以我有两个问题：

1) 指令模板是在什么时候添加到 DOM 中的？如果我使用 template 和 templateUrl 会有什么不同吗？

2) 如何添加假定完整 DOM 的附加代码？

谢谢。

【问题讨论】：

【解决方案1】：

1) 指令模板是在什么时候添加到 DOM 中的？如果我使用 template 和 templateUrl 会有什么不同吗？

你可以使用你喜欢的。然而，将你的 html 写在一个单独的文件中是一个更简洁的解决方案。我个人更喜欢templateUrl，因为我认为将您的 html 代码放入字符串不是一个好习惯。但是在执行代码时没有区别。

2) 如何添加假定完整 DOM 的附加代码？

$timeout 是 Angular 对 window.setTimeoutset 的封装。 Timeout 会从执行队列中移除该函数，并且它只会在 JavaScript 完成当前执行队列后被调用。这就是为什么您的模型将在执行之前更新的原因。

这是一个例子：

$timeout(function(){
   // template should be visible now
[,optional delay]);

在摘要周期完成之前，$timeout 不会运行。

【讨论】：

1) 这没有回答我的问题：指令模板何时添加到 DOM？它肯定是在链接功能之前的某个时候，但我还没有找到更好的方法来推理它。例如，如果您有两个带有两个模板的指令，我不知道先添加哪个模板。 2) 使用 $timeout 似乎是一种 hack：你是说等待几秒钟并希望到那时 DOM 已经完全加载？
$timeout 并没有等待“一段时间”来希望它完全加载。 Angularjs 在调用 $digest 后渲染模板，这在你的超时代码中首先被调用。当您立即使用 $timeout 时，您将在 javascript 队列的末尾“排队”该代码。这就是为什么你可以确定 DOM 已经更新了