为什么元素在指令的链接函数中不可用

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的手风琴。 我无法单步执行代码来查看实际发生的情况，但我强烈怀疑在Angular编译时出现了DOM，并且出现了问题。 这是一个看似合理的解释吗？

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

Answer 1

控制器和指令链接功能是异步调用的。 通常，您可以看到在主控制器完成之前构建的指令。当控制器终止时，指令更新其监视变量（ngModel，$ watch（something）...）。基本上这是通过承诺完成的。

但是不再调用链接/编译功能。你必须编译，观察，应用新的DOM。这基本上意味着将相似的代码写入angularjs。