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

您可能已经听过很多次了。 “在指令中执行所有的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指令似乎没有一个元素，但没有错误。

同样的事情发生在我现在正在使用的大型应用程序中。问题似乎是我们团队中的某个人决定在控制器中调用Jquery UI的手风琴，而不是指令。我还没有能够通过代码来看看实际发生了什么，但我强烈怀疑在Angular正在编译时出现DOM被修改，并且出现错误。这是一个合理的解释吗？

这是一个例子，如果你在指令之外进行DOM操作会出现什么问题？

来源

2014-08-29 Edminsson

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

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

来源

2014-08-29 11:23:11

在我发布的示例中，显然有些腥意。该元素在目录的链接函数中不可用，因为它应该是。我不确定你是否正在回答这个问题。手风琴的DOM操作是否会干扰某些Angular过程？ – Edminsson 2014-08-29 12:20:04

我不相信你说的是正确的，当页面加载角引导本身并编译通过所有节点并同步执行指令的文档时，唯一的情况是指令链接/编译函数将被异步调用如果它使用templateUrl来获取模板。 '$ watch'表达式是在'$ digest'迭代中执行的，它与promise没有任何关系。要触发$摘要，必须发生JavaScript事件（用户单击某个元素，XHR响应等）。 – Wawy 2014-08-29 16:30:08

您是对的，它的措辞很糟糕。我没有说链接函数是异步的。我的意思是在指令完成之前启动maint Controller。他们不相关。 #accordion内置于控制器中，因此这些更改不会被指令看到 – 2014-09-08 13:45:01

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

回答

相关问题