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...
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:
<div class="wrapper">
<div ng-repeat="item in test" danny-packery>
{{item.name}}
</div>
</div>
JavaScript:
var dannyPackery = app.directive('dannyPackery', ['$rootScope', function($rootScope) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
console.log('Running dannyPackery linking function!');
if($rootScope.packery === undefined || $rootScope.packery === null){
console.log('making packery!');
$rootScope.packery = new Packery(element[0].parentElement, {columnWidth: '.item'});
$rootScope.packery.bindResize();
$rootScope.packery.appended(element[0]);
$rootScope.packery.items.splice(1,1); // hack to fix a bug where the first element was added twice in two different positions
}
else{
$rootScope.packery.appended(element[0]);
}
$rootScope.packery.layout();
}
};
}]);
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.