angular-masonry отображает кирпичи в одном столбце после обновления результатов ngRepeat

Я испытываю интересное поведение с угловой кладкой. Я загружаю его, как указано в их документации:

<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>

Я загружаю $scope.results из вызова API, когда страница загружается, и все выглядит отлично... masonry отображает все кирпичи в линию, как и следовало ожидать. После обновления $scope.results из набора результатов API элементы отображаются в одном столбце слева от страницы. Стиль по-прежнему выглядит великолепно, но я не могу использовать всю ширину страницы. Я в основном иду от:

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

to:

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

Есть ли способ сказать каменной кладке пересчитать сетку? или кто-нибудь еще нашел хороший способ решить эту проблему? Я прочитал несколько вопросов, а также просмотрел проект github, но не могу найти хорошего решения.


angularjs angularjs-directive masonry jquery-masonry
person hera87    schedule 17.12.2014    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Я не уверен, что это лучшее решение, но это работает для меня в аналогичной ситуации:

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

Вызывайте refresh() всякий раз, когда ваш источник данных изменяется/обновляется. Это заставит каменную кладку пересчитать макет.

person Nate Barbettini    schedule 15.01.2015
comment
Подробнее о моей связанной проблеме здесь: stackoverflow.com/questions/27967781/ - person Nate Barbettini; 15.01.2015

arrow_upward
0
arrow_downward

Вызов

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

непосредственно перед установкой новых данных для повторной модели. мне помогло.

person Megabyte    schedule 30.12.2015