如何用Angular + Masonry修复重叠砖？

我正在使用passy的angular-masonry指令在我的应用程序中渲染平铺元素。 与许多砌体示例不同，我的砖块不包含图像，只包含通过自定义指令呈现的静态文本和布局内容。 我的设置如下：

data-event-item是我的指令，呈现如下内容：

 
 
 
 
{{event.name}}
 
 
 {{event.computed.locationName}}
 {{event.city}}, {{event.state}} {{event.zipCode}} 
   {{event.computed.registrationLabel}}    I'm Going    

在我的CSS中，我有一个已定义的width和height用于进入砖块的元素，因此（加上我明确设置masonry column-width的事实）应该让砌体知道我的砖块有多大。

一切正常，除了有时（随机？）在页面加载上，所有的砖块都在左边的一大堆中堆叠在一起，好像布局例程没有触发。 如果手动调整窗口的大小，一切都会恢复正常并保持这种状态。 这似乎是一些其他人遇到的问题： https ： //github.com/passy/angular-masonry/issues/82

我已经尝试了preserve-order和load-images="false"等所有组合。 我想我需要手动触发重载/重传，但据我所知，使用passy指令，你不能直接调用砌体方法。

Answer 1

我一直遇到Passy指令的问题。 也许这是由于我装的砖块数量或造型，但我不断得到大量的零星重叠，延迟重新装砖等等。

我切换到克莱德森的角度 – 砌体指令 ，对这个决定非常满意。 我没有确定基准，但它似乎加快了加载时间。

角砌体指令

一个非常简单且100％兼容的AngularJS砌体指令……你知道如何使用砌体吗？ 好！ 你知道如何使用它。

该指令适用于原始的masonry lib而不是jQuery。

Answer 2

对于遇到类似问题的人，我在这些 答案的帮助下找到了答案 。 作为奖励，这有助于我在使用Angularfilter修改显示哪些砖后刷新（第二个链接的答案处理此问题）。

这是我的工作代码，当我的异步数据加载到pageload时触发，以及数据被过滤或使用的任何时候：

 function refresh() { // We need to give Masonry a little jump-start, otherwise the bricks // will render in one big overlapped stack sometimes common.$timeout(function () { $scope.$broadcast('masonry.reload'); }, 100); } 

没有$timeout ，它看起来（对于我训练不良的眼睛）就像在摘要周期完成之前消耗了重新加载消息，所以可能还没有进行过滤或排序。 我不确定这是最好的解决方案，但它似乎在我的测试中工作到目前为止。 如果有人有更好的，我很乐意看到它。

Answer 3

试过3框架，只有这个工作： https ： //github.com/s-yadav/angulargrid

不需要第三方库！ 并且使用twitter bootstrap顺畅地完成。 希望它可能在将来帮助某人

关于他人的说明：

• https://github.com/passy/angular-masonry – >在开发方面工作相当顺利但在PROD上失败了。

• https://github.com/klederson/angular-masonry-directive – >有效，但所有砖都看不见!!