From 77ce8e2f63a7bdd608e721eabe020c14bb3ac37e Mon Sep 17 00:00:00 2001
From: shashank reddy <todearshashank@gmail.com>
Date: Sat, 26 Dec 2015 00:26:14 +0530
Subject: [PATCH] Changes to make multiple masonry containers work in single
 page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

As pointed out in issue #27, multiple masonry elements in a single page
do not work. Changes have been made in the js file to facilitate the
same. I’ve tested this in one of my projects and is working fine. Hence
I thought, I may contribute to this library to make the same available
in the coming release.
---
 src/angular-masonry-directive.js | 31 +++++++++++++++++--------------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/angular-masonry-directive.js b/src/angular-masonry-directive.js
index 1b17969..9d18d5c 100644
--- a/src/angular-masonry-directive.js
+++ b/src/angular-masonry-directive.js
@@ -4,16 +4,17 @@
     angular.module('masonry', ['ng']).directive('masonry', function($timeout) {
         return {
             restrict: 'AC',
-            link: function(scope, elem, attrs) {
-                var container = elem[0];
+            scope:{},
+            controller: function($scope,$element, $attrs) {
+                var container = $element[0];
                 var options = angular.extend({
                     itemSelector: '.item'
-                }, angular.fromJson(attrs.masonry));
+                }, angular.fromJson($attrs.masonry));
 
-                var masonry = scope.masonry = new Masonry(container, options);
+                var masonry = $scope.masonry = new Masonry(container, options);
 
                 var debounceTimeout = 0;
-                scope.update = function() {
+                this.update = function() {
                     if (debounceTimeout) {
                         $timeout.cancel(debounceTimeout);
                     }
@@ -23,37 +24,38 @@
                         masonry.reloadItems();
                         masonry.layout();
     
-                        elem.children(options.itemSelector).css('visibility', 'visible');
+                        $element.children(options.itemSelector).css('visibility', 'visible');
                     }, 120);
                 };
                 
-                scope.removeBrick = function() {
+                this.removeBrick = function() {
                     $timeout(function() {
                         masonry.reloadItems();
                         masonry.layout();
                    }, 500);
                 };                
                 
-                scope.appendBricks = function(ele) {
+                this.appendBricks = function(ele) {
                     masonry.appended(ele);
                 };                
                 
-                scope.$on('masonry.layout', function() {
+                $scope.$on('masonry.layout', function() {
                     masonry.layout();                 
                 });
                 
-                scope.update();
+                this.update();
             }
         };
     }).directive('masonryTile', function() {
         return {
             restrict: 'AC',
-            link: function(scope, elem) {
+            require:'^masonry',
+            link: function(scope, elem,attrs,masonryCtrl) {
                 elem.css('visibility', 'hidden');
                 var master = elem.parent('*[masonry]:first').scope(),
-                    update = master.update,
-                    removeBrick = master.removeBrick,
-                    appendBricks = master.appendBricks;                    
+                    update = masonryCtrl.update,
+                    removeBrick = masonryCtrl.removeBrick,
+                    appendBricks = masonryCtrl.appendBricks;                    
                 if (update) {
                     imagesLoaded( elem.get(0), update);
                     elem.ready(update);
@@ -70,3 +72,4 @@
         };
     });
 })();
+