Trying to get Packery.js working with an angularjs app I'm working with.
For some reason they don't seem to play nice together. I thought it might be resolved with the isInitLayout
false setting however, still no love.
Here is my (bootstrap 3) HTML:
<div class="row" class="js-packery"
data-packery-options='{ "itemSelector": ".packery-item",
"gutter": 10,
"columnWidth": 60,
"isInitLayout": false }'>
<artifact class="packery-item" ng-repeat="(index, thing) in data | limitObjectTo:4" thing="thing"></artifact>
</div>
I'm starting to wonder if it's because of the Artifact directive i'm using...
Any JS library you find will not simply work with Angular. Angular does compilation of the DOM which causes other libraries to lose the context. You must write a custom directive.
I found an existing directive for Masonry: https://github.com/passy/angular-masonry and packery is pretty similar to Masonry so I'm sure you can adapt it for packery.
As mentioned earlier, you have to make a directive that handles the use of Packery.
This directive made Packery work with AngularJS in the project I am working on.
Working fiddle: http://jsfiddle.net/8P6mf/2/
HTML:
JavaScript: