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

发布时间：2020-12-17 07:23:55 所属栏目：安全来源：网络整理

导读：有没有办法克隆AngularJS中的元素,其绑定完好无损？我正在尝试为图库创建图像预加载器.图像加载到屏幕外,然后根据其大小移动到三列中的一列.所以它实际上确实需要用JavaScript移动,因为我不知道它加载了它应该进入哪个容器. 所以假设我有类似的东西： img n

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

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

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

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

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

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

克隆是由一个指令完成的,我只使用Angular(没有jQuery保存Angular中包含的内容).

你应该做三个单独的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>

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!