角JS与jquery石工 [英] Angular JS with jquery masonry

问题描述

我需要使用棱角和砖石结构，还需要实现排序和过滤. 这里的小提琴确实使用了Angular的砖石结构，并且具有过滤和排序功能，但是布局看起来并不像砖石结构.我认为根本没有采用砌体布局.

I need to use angular and masonry and also implement sorting and filtering. The fiddle here does use the masonry with Angular and has filtering and sorting working, however the layout does not seem like masonry. I do not think the masonry layout is applied at all.

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/

Here is another fiddle with Passy's directive: http://jsfiddle.net/rdikshit/6swek/5/

仍然不起作用.甚至排序和过滤现在都无法正常工作.

STill does nt work. Even the sorting and filtering are not working now.

推荐答案

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

I modified your JSFiddle and got it to work. Since columnWidth is not specified, the width of the first element is used. That's why there is gap between the elements sometimes

需要注意的几点:

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

• Don't save the Masonry instance, since you are using the JQuery version. To access Masonry methods, simply get the container element then do container.masonry( 'methodName', arguments );
• The watches in the controller are not ideal, in a real app you probably want to put them into a directive
• The technique where you watch the number of children in the Masonry container doesn't work when you have ngAnimate as one of your dependency. It cause the DOM tree to be updated after $digest(), which make $watch miss

这篇关于角JS与jquery石工的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！