angular-更新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之后，这些项呈现在页面左侧的单个列中。样式看起来仍然很棒，但我无法利用整个页面的宽度。我基本上是这样说的：

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

至：

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

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

Answer 1

我不确定这是否是最好的解决方案，但在类似的情况下，这对我来说是有效的：

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

每当您的数据源发生更改/更新时，就调用refresh()。这将迫使masonry重新计算布局。

Answer 2

打电话

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

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