克隆AngularJs中的元素(绑定和所有)

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-repeats：

<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>

在控制器中，您应该异步加载图像，然后根据其大小将它们推送到三个数组之一。