javascript - Angular 指令后链接顺序错误 (1.3)

Question

我有两个嵌套的自定义指令。通常后链接函数以相反的顺序触发，但在我的特殊情况下，它们是自上而下触发的，这禁止我可靠地修改 DOM 的能力。我试图在 Plunker 中重现这个问题，但它总是正确的，所以我完全被难住了!


<message-container> <------ The template for this directive contains the directive <scrollable-content>
</message-container>


可滚动内容


return {
restrict: 'E',
templateUrl: 'core/app/partials/common/scrollable.html',
transclude: true,
replace: true,
scope: true,
link: function ($scope, $element, $attrs) {....


消息容器


return {
restrict: 'E',
replace: true,
scope: true,
templateUrl: 'core/app/partials/chat/message-container.html',
link: function ($scope, $element) {....


因为我不能用任何其他指令或在 plunker 中重现这个，有没有人知道任何原因如何或为什么会发生这种情况？基本上，在我的消息容器链接函数中，我想在可滚动内容指令标记中添加一些事件监听器。消息列表的链接函数中的元素只是标记而不是编译后的内容。

感谢任何帮助!

更新:我们的模板已预先缓存

Answer 1

几个月前我就开始研究这个，感觉好像不对，但其实是有逻辑的。templateUrl 异步下载模板，并在模板返回后触发对这些节点的编译。如果您使用缓存的模板，这甚至会以这种方式工作。 tempateURL 的“加载”将在当前摘要周期准备就绪后完成。事实上，即使模板已经在 $tempateCache 中对此进行了一些讨论，并且the documentation进行了调整以强调这种行为。

如果您确实需要顺序，请使用静态模板。或者使用这样的技巧:

 template: $templateCache.get('myTemplate.html'),

当然，您需要预加载模板才能完成这项工作!