在 AngularJs 中克隆元素（绑定和所有）答案

【问题标题】：Cloning elements (bindings and all) in AngularJs在 AngularJs 中克隆元素（绑定和所有）
【发布时间】：2013-11-11 11:07:00
【问题描述】：

有没有办法在 AngularJS 中克隆一个元素，并且其绑定完好无损？

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

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

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

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

我一直在尝试使用 $compile，但不知道如何在不手动复制所有属性的情况下使用它来克隆现有元素。

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

【问题讨论】：

角度考虑重新组织数据，而不是像使用 jQuery 那样移动 DOM 中的元素。然后 angular 将为您处理 DOM。创建一个演示，展示您正在尝试做的事情。要组织您的图像应该相当容易在加载器中为每个对象设置一个属性，并根据该属性进行列过滤
我已经想到了。在这种情况下，我希望实际克隆的原因是我需要预先加载图像，然后才能确定它们属于哪里。但也许你是对的，我应该尝试在加载时使用新的“X 位置”属性更新模型并过滤其上的容器。
是的，第二部分...更新模型...让 Angular 从那里处理它。图像加载器是异步的，但是 AJAX 也是。 angular 在构建时考虑到了大量的 ajax
阅读此how-do-i-think-in-angularjs-if-i-have-a-jquery-background
我需要在 DOM 中实际预加载图像有几个原因（获取不在元数据中的大小，防止可见加载），因此在这种情况下克隆是有意义的。但考虑绑定不值得：P

标签： angularjs angularjs-directive clone

【解决方案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>

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

【讨论】：