title: Masonry with AngularJS
body: <p>I am developing an "<em>art gallery</em>" app.</p>
  
  <p>Feel free to pull down the <strong><a href="https://github.com/gigablox/angular-imgur-gallery" rel="noreferrer">source on github</a></strong> and play around with it.</p>
  
  <p><strong><a href="http://plnkr.co/akHTslTdRMvfe3KrnPeO" rel="noreferrer">Plunker with full source.</a></strong></p>
  
  <p><strong>The current work around for getting Masonry to play nice with Angular:</strong></p>
  
  <pre><code>.directive("masonry", function($parse) {
    return {
      restrict: 'AC',
      link: function (scope, elem, attrs) {
        elem.masonry({ itemSelector: '.masonry-brick'});
      }
    };     
  })
  .directive('masonryBrick', function ($compile) {
    return {
      restrict: 'AC',
      link: function (scope, elem, attrs) {
        scope.$watch('$index',function(v){
          elem.imagesLoaded(function () {
            elem.parents('.masonry').masonry('reload');
          });
        });
      }
    };    
  });
  </code></pre>
  
  <p>This doesn't work well because:</p>
  
  <ul>
  <li>As the content grows, so does the overhead of tiggering reload on the entire container.</li>
  </ul>
  
  <p>The <code>reload</code> function:</p>
  
  <ul>
  <li><strong>Does not</strong> "<em>append</em>" items, rather re-arranges every item in the container.</li>
  <li><strong>Does</strong> work for triggering a reload when items are filtered out of a result set.</li>
  </ul>
  
  <p><em>In context with the app I've given links to above, this problem becomes very easy to replicate.</em> </p>
  
  <p><strong>I am looking for a solution that will use directives to leverage:</strong></p>
  
  <p><code>.masonry('appended', elem)</code> and <code>.masonry('prepended', elem)</code> </p>
  
  <p>Rather than executing <code>.masonry('reload')</code> every time.</p>
  
  <p><code>.masonry('reload')</code> for when elements are removed from result set.</p>
  
  <hr>
  
  <h2>EDIT</h2>
  
  <p><em>The project has been updated to use the working solution below.</em></p>
  
  <p>Grab the source on <strong><a href="https://github.com/gigablox/angular-imgur-gallery" rel="noreferrer">GitHub</a></strong></p>
  
  <p>See a working version on <strong><a href="http://plnkr.co/akHTslTdRMvfe3KrnPeO" rel="noreferrer">Plunker</a></strong></p>