Load Images and rearranging issue

[Bahnduame]

When load-images is set to true on my masonry div, my images load properly, but upon rearranging (filtering through angular) the bricks will have large gaps between each other. When load-images is set to false, bricks will overlap on initial load, but upon any kind of rearranging (window resizing or filtering) the bricks will adjust to properly space.

I have tried to initially set load-images to true and then make a timeout to set it to false a few hundred milliseconds later. This does not seem to work.

[DanielMSchmidt]

Did you try to run reload on the controller? It looks to me like the layout method of masonry needs to be called after the filtering (at least I had similar issues with the non angular version after the masonry items changed)

[CoenWarmer]

So is there a way to retrigger the masonry layout function through this directive? I'm getting the same issue as @Bahnduame...

[rbosneag]

@CoenWarmer check youanswer's comment here: https://github.com/passy/angular-masonry/issues/4. It worked fine for me (on most devices, at least).

[JoseCMRocha]

Can you check if you put the following code inside the directive 'masonryBrick' if it helps you?

scope.$watch(function () {
    return element.height();
},
function (newValue, oldValue) {
    if (newValue != oldValue) {
        ctrl.scheduleMasonryOnce('reloadItems');
        ctrl.scheduleMasonryOnce('layout');
    }
});

[donMichaelL]

i have exact the same problem. I am not sure that i implemented youranswer's solution right. I wrote the following code inside my Controller

$scope.$watch('filterText', function() { $timeout(function () { $rootScope.$broadcast('masonry.reload'); }, 200); });

And seems to work but am not satisfied... Do you have another recommendation ???