Merge pull request klederson#3 from natalie03/multiContainers

Allow multiple masonry containers on one page
jo-flynn · Jul 22, 2016 · fd8d0e7 · fd8d0e7
2 parents bf2069a + 9688870
commit fd8d0e7
Showing 1 changed file with 23 additions and 27 deletions.
diff --git a/src/angular-masonry-directive.js b/src/angular-masonry-directive.js
@@ -4,16 +4,17 @@
     angular.module('masonry', ['ng']).directive('masonry', ['$timeout', 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,55 +24,50 @@
                         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();
 
-                scope.$on('ngMasonry.update', function () {
-                    scope.update();
+                $scope.$on('ngMasonry.update', function () {
+                    this.update();
                 });
 
-                scope.$on('ngMasonry.removeBrick', function () {
-                    scope.removeBrick();
+                $scope.$on('ngMasonry.removeBrick', function () {
+                    this.removeBrick();
                 });
 
-                scope.$on('ngMasonry.appendBricks', function (el) {
-                    scope.appendBricks(el);
+                $scope.$on('ngMasonry.appendBricks', function (el) {
+                    this.appendBricks(el);
                 });
             }
         };
     }]).directive('masonryTile', function() {
         return {
             restrict: 'AC',
-            link: function(scope, elem) {
+            require:'^masonry',
+            link: function(scope, elem, attrs, masonryCtrl) {
                 elem.css('visibility', 'hidden');
-                var update = function () {
-                    scope.$emit('ngMasonry.update');
-                };
-                var removeBrick = function () {
-                    scope.$emit('ngMasonry.removeBrick');
-                };
-                var appendBricks = function (el) {
-                    scope.$emit('ngMasonry.appendBricks', el);
-                };
-
+                var master = elem.parent('*[masonry]:first').scope(),
+                    update = masonryCtrl.update,
+                    removeBrick = masonryCtrl.removeBrick,
+                    appendBricks = masonryCtrl.appendBricks;
                 if (update) {
                     imagesLoaded(elem.get(0), update);
                     elem.ready(update);