指令中的 AngularJS 克隆元素(无 Controller )从 Controller 调用函数两次

Question

我编写了一个指令来将表格标题固定在滚动顶部。效果很好。表格也是可排序的。当用户单击列标题时，列表将按该列排序，而当用户单击事件列时，排序将相反。一切都按我的预期进行。但是当我单击固定标题时，排序函数被调用两次(您可以在控制台中看到它)。

我找不到问题的根源以及如何解决它。这是我的plunkr 。预先感谢您的帮助...

顺便说一句，如果我删除编译代码(

var linkFn = $compile(fixedHeader);
linkFn(scope);

)，效果很好。但是 ng-class 不适用，因为我认为它无法访问 Controller 变量。

编辑:

我已经更新了 plunkr当我删除编译代码时显示我的 ng-class 问题。

Answer 1

你的问题是当你这样做时

 fixedHeader = header.clone(true).addClass("header-fixed").width(header.width());

然后做

  var linkFn = $compile(fixedHeader);
  linkFn(scope);

您不仅复制了 html，还复制了绑定(bind)，因此您不需要再次编译和链接它，但既然您正在这样做，您的事件就会执行两次，因为它们被链接了两次。因此您可以继续删除 $compile 或将 header.html() 内容分配给固定 header 并编译它。