Does this really work? "mansory" and parent()

[alexlangberg]

Hi there

I've tried to get this to work but without luck. I can see several weird things in the code, for instance:

var master = elem.parent('*[mansory]:first').scope();

Is there a reason this is called "mansory" and not "masonry"? I also don't think parent() supports selectors, unless you use jQuery?

I really like the idea of a directive that doesn't require jQuery. :)

[jgiovanni]

It is a typo, I would also suggest integrating imagesloaded plugin to add support for images like this:

angular.module('masonry', ['ng']).directive('masonry', function ($parse) {
    return {
        restrict: 'AC',
        link: function (scope, elem, attrs) {
            scope.items = [];
            var container = elem[0];
            var options = angular.extend({
                itemSelector : '.item'
            }, JSON.parse(attrs.masonry));

            scope.obj = new Masonry( container, options);
        }
    };
}).directive('masonryTile', function () {
        return {
            restrict: 'AC',
            link: function (scope, elem, attrs) {
                var master = elem.parent('*[masonry]:first').scope();
                $(elem).imagesLoaded(function () {
                    var mansory = master.obj;

                    elem.ready(function() {
                        mansory.addItems([elem]);
                        mansory.reloadItems();
                        mansory.layout();
                    })
                });

            }
        };

[klederson]

Yeah maybe on the packaging something went wrong however it's being used in some projects, if you follow the sample you should do good.

Anyway i'm going to check it tonight tks for the red flag

[quanghoc]

Anyone got this to work? Using above code, I still have error

SyntaxError: Unexpected token i
    at Object.parse (native)
    at link (http://localhost:10001/js/lib/angular/angular-masonry-directive.js:12:21)
    at nodeLinkFn (http://localhost:10001/js/lib/angular/angular.js:6169:13)
    at compositeLinkFn (http://localhost:10001/js/lib/angular/angular.js:5577:15)
    at compositeLinkFn (http://localhost:10001/js/lib/angular/angular.js:5580:13)
    at compositeLinkFn (http://localhost:10001/js/lib/angular/angular.js:5580:13)
    at compositeLinkFn (http://localhost:10001/js/lib/angular/angular.js:5580:13)
    at publicLinkFn (http://localhost:10001/js/lib/angular/angular.js:5485:30)
    at http://localhost:10001/js/lib/angular/angular.js:1300:27
    at Scope.$eval (http://localhost:10001/js/lib/angular/angular.js:11727:28) <div class="container-photos" masonry="{itemSelector : &quot;.tile&quot;, transitionDuration: 0}"> angular.js:9229
Uncaught TypeError: Cannot call method 'addItems' of undefined 

[changsoft]

The problem is that the 'masonry' directive is overriding the items provided by the scope.
Just comment the line (see below) and it should work.
//scope.items = [];

[hexadeciman]

So I got the angular masonry directive installed,
masonry & imagesloaded scripts loaded.
but I can't seem to get it working..

When I run my app I get this:

ReferenceError: obj is not defined
at link (http://app.test.com/app/lib/angular-masonry.js:28:52)
at nodeLinkFn (http://app.test.com/app/lib/angular-scenario.js:16004:13)
at compositeLinkFn (http://app.test.com/app/lib/angular-scenario.js:15414:15)
at publicLinkFn (http://app.test.com/app/lib/angular-scenario.js:15319:30)

So I looked at the directive and console logged to see what is undefined, I came to the conclusion that you cant access obj property from master in line 24 of angular-masonry (see the comments)
....
restrict: 'AC',
link: function(scope, elem) {
var master = elem.parent('*[masonry]:first').scope();
var masonry = master.obj;
console.log(master); //Returns The object
console.log(master.obj); //Returns Undefined
console.log(master['obj']); //Returns Undefined
....

Do you see what is wrong ?

[klederson]

Need to test this directive is long old... i'll find out some time today to check this out!

[sanjay-patel]

Hi,
I am getting
master = elem.parent('*[masonry]:first').scope();

master is not defined.