3

试图让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>

我开始怀疑这是否是因为我正在使用的 Artifact 指令......

4

2 回答 2

6

如前所述，您必须创建一个指令来处理 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();
        }
    };
}]);
于 2014-01-22T16:20:20.093 回答
2

你发现的任何 JS 库都不能简单地与 Angular 一起工作。Angular 会编译 DOM，这会导致其他库丢失上下文。您必须编写自定义指令。

我发现了一个现有的 Masonry 指令：https ://github.com/passy/angular-masonry并且 packery 与 Masonry 非常相似，所以我相信你可以将它用于 packery。

于 2013-10-21T15:15:15.183 回答