Masonry with AngularJS

Question

I am developing an \"art gallery\" app.

Feel free to pull down the source on github and play around with it.

Plunker with full

Answer 1

Rather than using two directives you could incorporate them both into one directive. Something like:

.directive("masonry", function($timeout) {
    return {
        restrict: 'AC',
        template: '
' +
                        '{{image.albumTitle|truncate}}' +
                        '' +
                  '
',
        scope: {
            pool: "="
        },
        link: function(scope, elem, attrs){
            elem.masonry({itemSelector: '.masonry-brick'});

            // When the pool changes put all your logic in for working out what needs to be prepended
            // appended etc
            function poolChanged(pool) {

                //... Do some logic here working out what needs to be appended, 
                // prepended...

                // Make sure the DOM has updated before continuing by doing a $timeout
                $timeout(function(){
                    var bricks = elem.find('.masonry-brick');
                    brick.imagesLoaded(function() {
                        // ... Do the actual prepending/appending ...
                    });
                });
            }

            // Watch for changes to the pool
            scope.$watch('pool', poolChanged, true); // The final true compares for 
                                                     // equality rather than reference
        }
    }
});

and html usage: