Colcade & AngularJS/Angular - anyone been successful?

[viking2917]

Am attempting to replace Masonry with Colcade in an AngularJS project, and cannot make it work as expected. wondering if anyone has advice.

The natural approach is to do an ng-repeat on a collection, then apply Colcade to it. E.g.

<div class="grid-item grid-item--a" ng-repeat="box in boxes">{{box.name}}</div>

then apply Colcade (via an 'append') to the resulting DOM elements, along these lines:

colc.append(document.querySelectorAll('.grid-item'));

However, there seems to be an inherent conflict: Angularjs wants the ng-repeat'id items to be in the above div, yet Colcade wants to move them into the new div which contains the colcade grid columns. Each time a $digest cycle happens (say, on an infinite-scroll update or otherwise adding new items), unpredictable things occur.

The below codepen loads 4 boxes, then another set of 4 boxes, and then another set of 4 boxes; at the end of it all the boxes are out of order. (this pen "appends" all the boxes each time). (If you append only the "new" set of 4 boxes, the other boxes disappear from the columns because the digest cycle moves them back to the original ng-repeat div...).

https://codepen.io/viking2917/pen/eYZGrNG

Wondering if anyone has done this successfully and what approach you took? While my example is AngularJS, it would seem possible/likely to occur with Angular as well, and perhaps other frameworks?

Perhaps the angular-created items need to be copied before putting into Colcade, so that Angular stops trying to manage them? But that seems inefficient....

Love the simplicity and control the Colcade machinery provides in comparison to Masonry, just can't seem to get it to co-exist with AngularJS.

[viking2917]

I was able to create a rudimentary solution that uses watchCollection to watch the array of ng-repeats, cloneNode()'s the created elements, and the applies colcade.append() to those items. This works, and displays quickly and beautifully without the periodic image overlap issues/artifacts of Masonry. Unfortunately, clodeNode does not clone event handlers in core javascript (https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode#Notes), so basically none of your ng-click or similar actions will be carried over to the newly created items. It seems this approach rapidly seems to become unworkable for anything more than the simplest application :(.

If anyone has successfully used Colcade with AngularJS or Angular, would love to hear how you approached it. The root of the issue seems to be that Colcade wants to move items around in the DOM, but Angular (via the HTML templates) also wants to control where the items occur, so I'm not sure I see a way through... :(