Angularjs 与 Packery.js答案

【问题标题】：Angularjs with Packery.jsAngularjs 与 Packery.js
【发布时间】：2013-10-30 03:51:35
【问题描述】：

试图让 Packery.js 与我正在使用的 angularjs 应用程序一起工作。

出于某种原因，他们似乎不太合得来。我认为可以通过isInitLayout false 设置解决它，但是仍然没有爱。

这是我的（引导程序 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 指令...

【问题讨论】：

我在某处有一个打包指令。让我去找。
没关系，它非常适合我的用例
@JonathanRowny 我很想知道你是如何解决这个问题的？
我写了一个指令......在使用 3rd 方库时，你总是必须写一个指令。
这很好用，除非您在 ng-repeat 中使用 limitTo 过滤器，否则您有什么想法可以处理由 limitTo 触发的对象的删除？

标签： javascript angularjs twitter-bootstrap packery

【解决方案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();
        }
    };
}]);

【讨论】：

我正在使用您的指令，效果很好。但是，我认为它缺少一些东西。当我将它与过滤器结合使用时，新元素总是附加在容器的末尾，在网格中留下空白空间。我正在努力，所以一旦我有时间把所有东西都放进去，我会尽快回来提供更多细节。
好的，我设置它非常快地从 angularjs 文档中抓取东西，但它给出了这个想法。 plnkr.co/edit/urFFS7t84WVg6OJoPnNJ?p=preview
当我尝试在同一页面上使用多个包装器时似乎不起作用
到目前为止，如果我们将$rootScope 更改为scope，则可以与多个包装器一起使用——谨慎使用（可能会破坏某些东西）jsfiddle.net/8P6mf/34

【解决方案2】：

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

我找到了一个现有的 Masonry 指令：https://github.com/passy/angular-masonry，packery 与 Masonry 非常相似，所以我相信您可以将其调整为 packery。

【讨论】：

是的，我也看到了，试过了，没用。所以我对它没有任何信心。