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

Question

我有一个AngularJS机智＆lt; nav＆gt;用于桌面的元素：

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

问题在于，对于移动设备，我需要实现离开画布的导航，其中整个身体被移位并且导航似乎从右侧滑入。

要做到这一点，不要在初始html有效负载中复制页面上的整个导航，我想我会通过使用jQuery.clone（）来做到这一点。

然而，当我这样做时，我正在失去$ 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"));
}