angularjs - 在 AngularJs 中克隆元素(绑定(bind)和所有)

Question

有没有办法在 AngularJS 中克隆一个元素，并且它的绑定(bind)是完整的？

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

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

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

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

我一直在尝试使用 $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>

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