ngRepeat 结果更新后，角砌体在单列中显示砖块

Question

我在使用 angular-masonry 时遇到了一些有趣的行为。我按照他们的文档中的说明加载它：

<input type="text" ng-model="searchString" ng-keyup="search()" />
<div masonry='{"gutter" : 25}'>
    <div class="masonry-brick" ng-repeat="result in results">
        <div>{{result.description}}</div>
    </div>
</div>

当页面加载并且一切看起来都很棒时，我从 API 调用加载 $scope.results... masonry 会像您期望的那样内联渲染所有砖块。在我从 API 结果集中刷新 $scope.results 后，项目呈现在页面左侧的单个列中。样式看起来仍然很棒，但我无法利用整个页面宽度。我基本上来自：

---- ---- ----
---- ---- ----

到：

----
----
----
----
----
----

有没有办法告诉砌体重新计算网格？或者有没有其他人找到解决这个问题的好方法？我已经阅读了几个问题并查看了 github 项目，但我似乎找不到一个好的解决方案。

Answer 1

我不确定这是否是最佳解决方案，但这在类似情况下对我有用：

function refresh() {
    common.$timeout(function () { $scope.$broadcast('masonry.reload'); }, 100);
}

只要您的数据源发生更改/更新，请致电 refresh()。它会强制砌体重新计算布局。

Answer 2

打电话

$('.grid').masonry('destroy');

就在为重复模型设置新数据之前。 它对我有帮助。