带有 jquery 砌体的 Angular JS

Question

我需要使用 angular 和 masonry，还需要实现排序和过滤。 这里的小提琴确实使用了 Angular 的砌体，并且具有过滤和排序工作，但是布局看起来不像砌体。我认为根本没有应用砌体布局。

http://jsfiddle.net/rdikshit/6swek/3/

  <div ng-app="test">
 <div ng-controller="MainCtrl">
      <input type="text" ng-model="nameFilter" />
    <a href="#" ng-click="order = 'id'; reverse=!reverse">Order by id</a>
    <a href="#" ng-click="order = 'name';reverse=!reverse">Order by name</a>
    <a href="#" ng-click="order = 'age';reverse=!reverse">Order by age</a>
     <div class="items" masonry >
         <div ng-repeat="item in items | filter: { name: nameFilter } | orderBy: order:reverse" class={{item.style}}>

          <span>{{item.name}}</span>
            <span>id: {{item.id}}</span>
            <br /> <span>Age: {{item.age}}</span>
                         <br /> <span>Style: {{item.style}}</span>

     </div>
     </div>
 </div>
</div>

这是 Passy 指令的另一个小提琴： http://jsfiddle.net/rdikshit/6swek/5/

仍然不起作用。现在连排序和过滤都不起作用了。

Answer 1

我修改了您的 JSFiddle 并将其发送到 work。由于未指定 columnWidth，因此使用第一个元素的宽度。这就是为什么有时元素之间存在差距

需要注意的几点：

• 不要保存 Masonry 实例，因为您使用的是 JQuery 版本。要访问 Masonry 方法，只需获取容器元素，然后执行 container.masonry( 'methodName', arguments );
• 控制器中的手表并不理想，在实际应用中您可能希望将它们放入指令中
• 当您将ngAnimate 作为您的依赖项之一时，用于查看 Masonry 容器中子项数量的技术不起作用。它会导致 DOM 树在 $digest() 之后更新，这使得 $watch 错过

Answer 2

我正在做一个类似的项目，但我正在使用带有 mansory 风格的 Isotope。 这是我使用它的方式：

指令：

    app.directive('isotope', function ($timeout) {
    return {
        scope: {
            items: '=isotope'
        },
        templateUrl: 'social-item.html',
        link: function (scope, element, attrs) {

            var options = {
                animationEngine : 'jquery',
                itemSelector: '.social-item',
                layoutMode: 'masonry',
                masonry : {
                    "gutter": 10,
                    "isFitWidth": true
                }
            };

            element.isotope(options);

            scope.$watch('items', function() {
                $timeout(function() {
                    element.isotope( 'reloadItems' ).isotope();
                });
            },true);
        }
    };
});

指令模板（social-item.html）：

<div class="social-item" ng-repeat="item in items track by $index">
    <!--
         Do something with item, in your case something like this:
         <span>{{item.name}}</span>
         <span>id: {{item.id}}</span>
    -->
</div>

HTML 标记：

<div class="social-wall-container" isotope="socials.posts">
    <!-- repeat posts from directive -->
</div>

有关同位素检查的更多信息This link 如果您决定使用同位素，请确保包含位于 github 页面上 JS 文件夹中的必要文​​件。