Angularjs with Packery.js

Question

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

@JonathanRowny i'd be interested to know how you solved the problem? — flashpunk, Oct 21 '13 at 15:14
I wrote a directive... you always have to write a directive when working with 3rd party libraries. — Jonathan Rowny, Oct 21 '13 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, Mar 16 '14 at 02:26

score 6 · Accepted Answer · answered Jan 22 '14 at 16:20

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();
        }
    };
}]);

I am using your directive and it works great. However, I think it is missing something. When I use it in combination with a filter, the new elements are always appended at the end of the container, leaving empty spaces in the grid. I am working on it, so I'll be back soon with more details as soon as I will have time to put everything in a plunker. — pasine, Jun 25 '14 at 10:34
Ok, I set it up really quickly grabbing stuff from angularjs docs, but it gives the idea. http://plnkr.co/edit/urFFS7t84WVg6OJoPnNJ?p=preview — pasine, Jun 25 '14 at 10:51
doesn't seem to work when I'm trying to use multiple packery(s) on the same page — David, Jun 02 '15 at 14:41
works with multiple packery(s) so far if we change `$rootScope` to `scope` -- use with caution (might break something) http://jsfiddle.net/8P6mf/34/ — David, Jun 02 '15 at 15:12

score 2 · Answer 2 · answered Oct 21 '13 at 15:15

2

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.

answered Oct 21 '13 at 15:15

Jonathan Rowny

7,588
1
18
26

Yeah i saw that one too, tried it and didn't work. So I didn't really have any confidence in it. – flashpunk Oct 21 '13 at 17:26

Angularjs with Packery.js

2 Answers2

Linked