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 th

Answer 1

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

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