为什么元素在指令的链接功能中不可用

Question

你可能已经听过很多次了。 “在指令中进行所有 DOM 操作”。但似乎没有人说过如果你真的在 Angular 中的指令之外进行 DOM 操作会发生什么。

我在Plunk 中设法重现了一个问题

我做了一个非常简单的指令，只是将元素输出到控制台。

app.directive('dirre', function(){
  return {
    link: function(scope, element, attrs){
      console.log({message:"dirrens linkFn", element: element, count: element.length})
    }
  }
});

我有两个相同的 jquery UI 手风琴，唯一的区别是它们的调用方式。一个在控制器中调用，另一个在指令中调用。从控制器调用手风琴当然是不好的。

如您所见，如果您运行该应用程序，则会出现以下情况：其中一个 dirre-directives 似乎没有元素但没有错误。

我现在正在使用的一个大型应用程序中也会发生同样的事情。问题似乎是我们团队中的某个人决定在控制器而不是指令中调用 Jquery UI 的手风琴。 我无法单步执行代码以查看实际发生的情况，但我强烈怀疑 DOM 在 Angular 编译时被修改并且出现了问题。 这是一个合理的解释吗？

如果您在指令之外进行 DOM 操作，这是否是一个可能出错的示例？

Answer 1

控制器和指令链接函数是异步调用的。 通常您可以在主控制器完成之前看到正在构建的指令。当控制器终止时，指令会更新它们的监视变量（ngModel、$watch(something)...）。基本上这是通过 Promise 完成的。

但是，链接/编译函数不再被调用。你必须编译、观察、应用新的 DOM。这基本上意味着编写与 angularjs 类似的代码。