Question

有没有办法克隆AngularJS中的元素，其绑定完好无损？

我正在尝试为图库创建图像预加载器。图像加载到屏幕外，然后根据其大小移动到三列中的一列。所以它实际上确实需要用JavaScript移动，因为我不知道它加载了它应该进入哪个容器。

所以假设我有类似的东西：

<img ng-src="/some/{{image}}" ng-click="doStuff()" />

我希望克隆与此相同，ng-click绑定完好无损。我遇到的问题是，如果我使用 element.clone（）。appendTo（someOtherElement） 克隆元素，那么ng-click绑定在此过程中就会丢失。当元素插入DOM时，Angular没有意识到它需要创建新的绑定。

我一直在尝试使用$ compile，但我无法弄清楚如何使用它来克隆现有元素而无需手动复制所有属性。

克隆是通过指令完成的，我只使用Angular（没有jQuery保存Angular中包含的内容）。

Answer 1

你应该做三个单独的ng重复：

<div ng-controller="myController">
     <div class="col1">
          <img ng-src="/some/{{image.src}}" ng-click="doStuff()" ng-repeat="image in imagesForColOne" />
     </div>

     <div class="col2">
          <img ng-src="/some/{{image.src}}" ng-click="doStuff()" ng-repeat="image in imagesForColTwo" />
     </div>

     <div class="col3">
          <img ng-src="/some/{{image.src}}" ng-click="doStuff()" ng-repeat="image in imagesForColThree" />
     </div>

</div>

在您的控制器中，您应该异步加载图像，然后根据其大小将它们推入三个阵列中的一个。

克隆AngularJs中的元素（绑定和所有）

1 个答案: