1

I'm experiencing some interesting behavior with angular-masonry. I load it as specified in their documentation:

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

I load $scope.results from an API call when the page loads and everything looks great... masonry renders all the bricks inline as you would expect. After I refresh the $scope.results from an API result set, the items render in a single column to the left of the page. The styling still looks great but I'm not able to utilize the full page width. I basically go from:

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

to:

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

Is there a way to tell masonry to recalculate the grid? or has anyone else found a good way to solve this problem? I've read a through a few questions and also looked at the github project but I can't seem to find a good solution.

hera87
  • 7
  • 3

2 Answers2

0

I'm not sure if it's the best solution, but this is working for me in a similar situation:

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

Call refresh() whenever your data source is changed/updated. It'll force masonry to recalculate the layout.

Nate Barbettini
  • 51,256
  • 26
  • 134
  • 147
  • More details on my related problem here: http://stackoverflow.com/questions/27967781/how-to-fix-overlapping-bricks-with-angular-masonry – Nate Barbettini Jan 15 '15 at 16:10
0

Call

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

just before set new data for repeat model. it's helped me.

Megabyte
  • 66
  • 6