指令中的AngularJS clone元素（不带控制器）从控制器调用两次函数

Question

我写了一个指令，将表格的标题修改为滚动顶部。它工作正常。表也​​是可排序的。当用户单击列的标题时，列表按该列排序，当用户单击活动列时，排序将相反。一切都按照我的预期运作。但是当我点击固定标题时，排序函数被调用两次（你可以在控制台中看到它）。

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

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

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

），它运作正常。但是ng-class不适用，因为我认为它无法访问控制器变量。

修改

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

Answer 1

你的问题是当你这样做时

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

然后做

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

您不仅要复制html，还要复制绑定，因此您不需要编译它并再次链接，但是由于您正在执行此操作，因此事件会被执行两次，因为它们被链接两次。所以你可以继续删除$ compile或将header.html（）内容分配给你的固定头并编译它。

Answer 2

尝试使用angular.copy（）：

 fixedHeader = angular.copy(header).addClass("header-fixed").width(header.width());