How do you trigger a reboot in angular-masonry?

Question

I got Freemasonry to work in my AngularJS application using the angular-masonry directive , but I want to be able to call a function or method on my controller that will cause the elements to be reloaded in the container. I see in the source code (lines 101-104) there is a reboot method, but I'm not sure how to call it. Any ideas?

Thanks!

Answer 1

If used in the future, Passy watches an event called masonry.reload.

So, you can pass this event, and Passy should call "layout" on the masonry element, for example. call

$rootScope.$broadcast('masonry.reload'); 

In my case, I had third-party javascript decorating my bricks, so I needed to redraw it after it was done. For the reason (I couldn’t understand why), I needed to enable the broadcast of events in a timeout, I think the Passy scheduler eats the event and does not repaint it. For instance. I did:

 $timeout(function () { $rootScope.$broadcast('masonry.reload'); }, 5000); 

This way you do not need to modify Passy directly.

Answer 2

I do not think that you can call the reload () method directly, since it is part of the controller, which is visible only in directives.

You can either ...

A) starts a reboot directly from the masonry through the element, jQuery style

(see http://jsfiddle.net/riemersebastian/rUS9n/10/ ):

 $scope.doReloadRelatively = function(e) { var $parent = $(e.currentTarget).parent().parent(); $parent.masonry(); } $scope.doReloadViaID = function() { $('#container').masonry(); } 

B) or expand the directives themselves, i.e. add the necessary hours on the brickwork and call the reload () method inside (depending on which use case you have).

 .directive('masonryBrick', function masonryBrickDirective() { return { restrict: 'AC', require: '^masonry', scope: true, link: { pre: function preLink(scope, element, attrs, ctrl) { var id = scope.$id, index; ctrl.appendBrick(element, id); element.on('$destroy', function () { console.log("masonryBrick > destroy") ctrl.removeBrick(id, element); }); scope.$watch(function () { return element.height(); }, function (newValue, oldValue) { if (newValue != oldValue) { console.log("ctrl.scheduleMasonryOnce('layout');"); ctrl.scheduleMasonryOnce('layout'); } } ); ... 

In the above block of code, I simply added a clock to an element with a class class brick to cause a reboot of the masonry when the height of the elements changed.

I created jsFiddle to test passys' angular -masonry myself, feel free to check it out!

http://jsfiddle.net/riemersebastian/rUS9n/10/

EDIT:

Just found a similar entry in stackoverflow, which might be another solution to this problem:

AngularJS Freemasonry for dynamically changing heights

Answer 3

Answer from @SebastianRiemer helped me.

But for future people in need of help, try using the following instead

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