feat(directive): add reload-on-show option

Add a `$watch` to detect when `masonry` is displayed after being
hidden and call `ctrl.reload()`.

Author: kkolstad

README.md

@@ -98,6 +98,24 @@ doesn't actually make use of images.
 </masonry>
 ```
 
+### `reload-on-show`
+
+The `reload-on-show` attribute triggers a reload when the masonry element (or an
+ancestor element) is shown after being hidden, useful when using `ng-show` or 
+`ng-hide`. Without this if the viewport is resized while the masonry element is 
+hidden it may not render properly when shown again.
+
+*Example:*
+
+```html
+<masonry reload-on-show ng-show="showList">
+    <div class="masonry-brick">...</div>
+    <div class="masonry-brick">...</div>
+</masonry>
+```
+
+When `showList` changes from falsey to truthy `ctrl.reload` will be called.
+
 ### `masonry-options`
 
 You can provide [additional options](http://masonry.desandro.com/options.html)

src/angular-masonry.js

@@ -135,6 +135,16 @@
             ctrl.loadImages = loadImages !== false;
             var preserveOrder = scope.$eval(attrs.preserveOrder);
             ctrl.preserveOrder = (preserveOrder !== false && attrs.preserveOrder !== undefined);
+            var reloadOnShow = scope.$eval(attrs.reloadOnShow);
+            if (reloadOnShow !== false && attrs.reloadOnShow !== undefined) {
+              scope.$watch(function () {
+                return element.prop('offsetParent');
+              }, function (isVisible, wasVisible) {
+                if (isVisible && !wasVisible) {
+                  ctrl.reload();
+                }
+              });
+            }
 
             scope.$emit('masonry.created', element);
             scope.$on('$destroy', ctrl.destroy);

test/spec/directive.coffee

@@ -61,6 +61,22 @@ describe 'angular-masonry', ->
     expect(call.args[0].isOriginLeft).toBeTruthy()
   )
 
+  it 'should setup a $watch when the reload-on-show is present', inject(($compile) =>
+    sinon.spy(@scope, '$watch')
+    element = angular.element '<masonry reload-on-show></masonry>'
+    element = $compile(element)(@scope)
+
+    expect(@scope.$watch).toHaveBeenCalled()
+  )
+
+  it 'should not setup a $watch when the reload-on-show is missing', inject(($compile) =>
+    sinon.spy(@scope, '$watch')
+    element = angular.element '<masonry></masonry>'
+    element = $compile(element)(@scope)
+
+    expect(@scope.$watch).not.toHaveBeenCalled()
+  )
+
   describe 'MasonryCtrl', =>
     beforeEach inject(($controller, $compile) =>
       @element = angular.element '<div></div>'