Angular JS 尝试创建 header 的克隆，但指令不再适用于克隆

Question

尝试做这样的事情

    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');

它为粘性 header 解决方案创建了我的 header 的克隆，但后来我注意到我在 header 中的 link 上的指令，即帮助 link opens/closes 弹出菜单不再有效。

即在我的 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>

我在 dropdown-toggle 上有一个点击事件，它不再在复制的 header 上触发。

有什么想法吗？

Answer 1

既然你在修改DOM，你必须通知angular它需要重新审视一下。这就是 $compile 服务的用途。在克隆代码后添加此代码：

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

Angular JS 尝试创建 header 的克隆，但指令不再适用于克隆

Angular JS Trying create a clone of header, but directives no longer work on clone

angularjs

angular-ui

angularjs-directive

angular-bootstrap