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.
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.
then apply Colcade (via an 'append') to the resulting DOM elements, along these lines:
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.