Angularjs с Packery.js

Question

Попытка заставить Packery.js работать с приложением angularjs, с которым я работаю.

По некоторым причинам они, кажется, не играют хорошо вместе. Я думал, что это может быть решено с isInitLayout ложная установка, однако, по-прежнему нет любви.

Вот мой (загрузчик 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>

Я начинаю удивляться, если это из-за директивы Артефакта, которую я использую...

Answer 1

Как упоминалось ранее, вы должны сделать директиву, которая обрабатывает использование Packery.

Эта директива заставила Packery работать с AngularJS в проекте, над которым я работаю.

Рабочая скрипка: 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

Любая библиотека JS, которую вы найдете, не будет просто работать с Angular. Angular выполняет компиляцию DOM, что приводит к потере контекста другими библиотеками. Вы должны написать пользовательскую директиву.

Я нашел существующую директиву для Masonry: https://github.com/passy/angular-masonry и упаковка довольно похожа на Masonry, поэтому я уверен, что вы можете адаптировать ее для упаковки.