AngularJS-克隆的HTML失去了$ scope

Question

我有一个用于桌面的<nav>元素的AngularJS：

<nav ng-controller="MainNavController" class="navbar navbar-default" role="navigation"> 

问题是，对于移动设备，我需要实现一个画布外导航，其中整个身体都移了过来，并且导航器似乎从右侧滑入。

为此，我认为可以使用jQuery.clone（）来完成此操作，而不是在初始html有效负载中复制整个页面。

但是，当我这样做时，我失去了$ scope上下文。 我的复制锚中的ng-click函数没有被触发。

我在指令中复制这些项目，并尝试调用scope。$ apply（），但它没有用。

$(".prenav > *").clone().appendTo($(".off-canvas__nav"));
scope.$apply();

从我的阅读看来，我需要以某种方式在此新html上调用$ compile，但是我不确定在当前设置中如何/何时进行此操作。

任何帮助，将不胜感激。

-斯科特

Answer 1

您需要先$ compile它，否则Angular会将其视为一堆木头：

scope.$apply(function(){
  var newNav = $(".prenav > *").clone();
  $compile(newNav)(scope);
  newNav.appendTo($(".off-canvas__nav"));
}