Angular JS尝试创建标题的克隆，但指令不再适用于克隆答案

【问题标题】：Angular JS Trying create a clone of header, but directives no longer work on cloneAngular JS尝试创建标题的克隆，但指令不再适用于克隆
【发布时间】：2015-03-20 11:33:14
【问题描述】：

尝试做这样的事情

    angular.element('.header').addClass('original').clone().insertAfter('.header').addClass('cloned').css('position', 'fixed').css('top', '0').css('margin-top', '0').css('z-index', '500').css('padding-top', '15px').css('padding-bottom', '16px').removeClass('original').hide();
    angular.element('.cloned').show();
    angular.element('.original').css('visibility', 'hidden');
    angular.element('.original').addClass('orginal-header');

它为粘性标题解决方案创建了我的标题的克隆，但随后我注意到标题中的链接上的指令，即打开/关闭弹出菜单的帮助链接不再有效。

即在我的标题中我有这个

<div class="dropdown pull-right" dropdown on-toggle="toggled(open)">
        <a class="btn btn-default btn-menu dropdown-toggle" href dropdown-toggle> Help? </a>
        <ul class="dropdown-menu">
          <li><a ui-sref="help">Get Help?</a></li>
          <li><a href open-support-modal>Report an Issue</a></li>
        </ul>
      </div>

我在下拉切换上有一个点击事件，它不再在复制的标题上触发。

有什么想法吗？

【问题讨论】：

克隆完成后需要重新附加事件。
所以我需要在帮助链接上重新附加下拉切换指令？如果我在源代码中查看两个标头的 html，它们都是相同的，只是原始的具有工作指令，而克隆的标头指令什么也不做
我想你可能需要使用$compile编译HTML代码。
这可能会解决它：var element = angular.element(".cloned"); $compile(element.contents())($scope);
让我们continue this discussion in chat。

标签： angularjs angularjs-directive angular-ui angular-bootstrap

【解决方案1】：

由于您正在修改 DOM，因此您必须通知 Angular 它需要重新审视事物。这就是$compile 服务的用途。在您的克隆代码之后添加此代码：

var element = angular.element(".cloned"); 
$compile(element.contents())(scope);

【讨论】：