与Packery.js Angularjs

问题描述

试图让 Packery.js 与 angularjs 应用我的工作工作。

Trying to get Packery.js working with an angularjs app I'm working with.

由于某种原因，他们似乎没有发挥好在一起。我想这可能与 isInitLayout 设置为false但是得到解决，仍然没有爱。

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.

这是我的（自举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...

推荐答案

正如前面提到的，你必须做出处理使用Packery的指令。

As mentioned earlier, you have to make a directive that handles the use of Packery.

该指令做出Packery工作，在我工作的项目AngularJS。

This directive made Packery work with AngularJS in the project I am working on.

工作小提琴：

HTML

<div class="wrapper">
    <div ng-repeat="item in test" danny-packery>
        {{item.name}}
    </div>
</div>

JavaScript的：

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

这篇关于与Packery.js Angularjs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！