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...

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...

• javascript
• angularjs
• twitter-bootstrap
• packery

• I have a packer directive somewhere. Lemme look for it. – Jonathan Rowny Commented Oct 21, 2013 at 15:11
• nevermind, it's pretty specific to my usecase – Jonathan Rowny Commented Oct 21, 2013 at 15:12
• @JonathanRowny i'd be interested to know how you solved the problem? – flashpunk Commented Oct 21, 2013 at 15:14
• I wrote a directive... you always have to write a directive when working with 3rd party libraries. – Jonathan Rowny Commented Oct 21, 2013 at 15:14
• This works fine, unless you use the limitTo filter in ng-repeat, any Idea on how can you handle the removal of objects triggered by limitTo? – Hey Hey Commented Mar 16, 2014 at 2:26

2 Answers 2

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/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 pilation 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./passy/angular-masonry and packery is pretty similar to Masonry so I'm sure you can adapt it for packery.