From d01ca003b8de2c040693870916b5125af911681a Mon Sep 17 00:00:00 2001
From: Blake Rego <blake.rego@gmail.com>
Date: Sun, 12 Mar 2017 19:17:49 -0400
Subject: [PATCH] fix(masonry.restrict): change directive restriction to
 attribute-only

The masonry directive does not properly create columns when used as an element.  To avoid confusion,
I updated the directive code to restrict usage to attribute mode only (this could always be changed
back, if a subsequent fix was made to fix element loading). I have also updated the repository
README documentation to provide a more accurate account of how the masonry directive currently
works. This issue was first brought up here: https://github.com/passy/angular-masonry/issues/169.

This will invalidate uses of this directive as an element. However, these uses are likely already
broken.
---
 README.md              | 28 ++++++++++++++--------------
 src/angular-masonry.js |  2 +-
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/README.md b/README.md
index c0f3e4d..9dc23d1 100644
--- a/README.md
+++ b/README.md
@@ -66,10 +66,10 @@ directive.
 *Example:*
 
 ```html
-<masonry item-selector=".mybrick">
+<div masonry item-selector=".mybrick">
     <div masonry-brick class="mybrick">Unicorns</div>
     <div masonry-brick class="mybrick">Sparkles</div>
-</masonry>
+</div>
 ```
 
 ### `column-width`
@@ -81,9 +81,9 @@ not set, Masonry will use the outer width of the first element.
 *Example:*
 
 ```html
-<masonry column-width="200">
+<div masonry column-width="200">
     <div class="masonry-brick">This will be 200px wide max.</div>
-</masonry>
+</div>
 ```
 
 ### `preserve-order`
@@ -96,10 +96,10 @@ elements isn't set at the time they are inserted.
 *Example:*
 
 ```html
-<masonry preserve-order>
+<div masonry preserve-order>
     <div class="masonry-brick"><img src="..." alt="Will always be shown 1st"></div>
     <div class="masonry-brick"><img src="..." alt="Will always be shown 2nd"></div>
-</masonry>
+</div>
 ```
 
 ### `load-images`
@@ -109,10 +109,10 @@ Allows usage of `imagesLoaded` plugin. Defaults to `false`.
 *Example:*
 
 ```html
-<masonry load-images="true">
+<div masonry load-images="true">
     <div class="masonry-brick"><img src="/your/image_1.jpg" alt="image"/></div>
     <div class="masonry-brick"><img src="/your/image_2.jpg" alt="image"/></div>
-</masonry>
+</div>
 ```
 
 ### `reload-on-show`
@@ -125,10 +125,10 @@ hidden it may not render properly when shown again.
 *Example:*
 
 ```html
-<masonry reload-on-show ng-show="showList">
+<div masonry reload-on-show ng-show="showList">
     <div class="masonry-brick">...</div>
     <div class="masonry-brick">...</div>
-</masonry>
+</div>
 ```
 
 When `showList` changes from falsey to truthy `ctrl.reload` will be called.
@@ -144,10 +144,10 @@ some blank space may be left on the sides.
 *Example:*
 
 ```html
-<masonry reload-on-resize>
+<div masonry reload-on-resize>
     <div class="masonry-brick">...</div>
     <div class="masonry-brick">...</div>
-</masonry>
+</div>
 ```
 
 
@@ -159,8 +159,8 @@ as expression either as `masonry` or `masonry-options` attribute.
 *Example:*
 
 ```html
-<masonry masonry-options="{ transitionDuration: '0.4s' }">
-</masonry>
+<div masonry masonry-options="{ transitionDuration: '0.4s' }">
+</div>
 ```
 
 Equivalent to:
diff --git a/src/angular-masonry.js b/src/angular-masonry.js
index 33ecf4b..2441fb5 100755
--- a/src/angular-masonry.js
+++ b/src/angular-masonry.js
@@ -127,7 +127,7 @@
 
     }).directive('masonry', function masonryDirective() {
       return {
-        restrict: 'AE',
+        restrict: 'A',
         controller: 'MasonryCtrl',
         controllerAs: 'msnry',
         link: {