javascript - Angularjs - 克隆的 html 正在失去 $scope

Question

我有一个带有

元素的 AngularJS，用于桌面:

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

问题是，对于移动设备，我需要实现一个 Canvas 外导航，其中整个 body 被转移并且导航似乎从右侧滑入。

为了做到这一点，我想我应该使用 jQuery.clone() 来完成此操作，而不是在初始 html 负载中复制页面上的整个导航。

但是，当我这样做时，我会丢失 $scope 上下文。我复制的 anchor 中的 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"));
}