Cloning elements (bindings and all) in AngularJs

Question

Is there a way to clone an element in AngularJS with whole links?

I am trying to create an image preloader for a gallery. The image is loaded from the screen and then moved to one of three columns depending on its size. Therefore, in fact, it needs to be moved using JavaScript, because I do not know until it loads what container it should enter.

So, suppose I have something like:

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

I want the clone to be identical to this, with an ng-click binding. The problem I am facing is that if I clone an element using element.clone (). AppendTo (someOtherElement) , then the ng-click binding is lost along the way. When an element is inserted into the Angular DOM, it does not realize that it needs to create new bindings.

I experimented with compiling $, but I cannot figure out how to clone an existing element using it without manually copying all the attributes.

Cloning is done using the directive and I use only Angular (no jQuery to save what is included in Angular).

Answer 1

You should do three separate 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> 

In your controller, you must load the images asynchronously, and then insert them into one of the three arrays depending on its size.