[bug] If you don't use ng-repeat to add the masonry-bricks the layout gets messed up about angular-masonry HOT 16 OPEN

So I did some testing... in these first two tests I used <div class="masonry-brick">...</div> and I ran console.log(element.masonry('getItemElements')); right after initializing masonry in the masonry directive...

Test 1: When I used ng-repeat to add the masonry-bricks in, console.log(element.masonry('getItemElements')); returns an empty array.
Result: Layout is fine.

Test 2: When I added the masonry-bricks manually, console.log(element.masonry('getItemElements')); returns an array with all the masonry-brick elements.
Result: Layout is messed up.

Test 3: In the third test I used <div masonry-brick>...</div> and removed the class, and had the masonry-brick directive automatically set the class using element.addClass(itemSelector).
Result: Layout is fine.

So from this I assume the issue has to do with the way that masonry is initializing... but I can't for the life of me figure out why this is the case.

The solutions right now, bad as they are, seems to be to either (1) use ng-repeat or (2) use masonry-brick as an attribute and add the itemSelector class in via the masonry-brick directive.

from angular-masonry.

Interesting. This must be related to the order in which AngularJS initializes the directives. But if something goes wrong during the initialization, you should usually see an error. Is there anything in the console?

from angular-masonry.

I have the same problem. Do you have sample code on this workaround?

(2) use masonry-brick as an attribute and add the itemSelector class in via the masonry-brick directive.

from angular-masonry.

@quanghoc I would definitely recommend just using ng-repeat if you can. The problem with the second solution is that it would require you to change the angular-masonry.js code. It would be hacky, is not a real fix, and so is something that you should avoid doing.

What I suggest doing instead if you cannot use ng-repeat is to (1) make sure that whatever class you are using as the itemSelector is removed from the brick. (2) set the itemSelector class using ng-class like so ng-class="{'masonry-brick': true}".

Your template code for the masonry portion should end up looking something like this:

<div masonry>
    <div masonry-brick ng-class="{'masonry-brick': true}">
        <img ng-src="http://lorempixel.com/g/400/100/?2296" alt="A masonry brick">
    </div>
    <div masonry-brick ng-class="{'masonry-brick': true}">
        <img ng-src="http://lorempixel.com/g/400/300/?9982" alt="A masonry brick">
    </div>
    <div masonry-brick ng-class="{'masonry-brick': true}">
        <img ng-src="http://lorempixel.com/g/400/200/?3672" alt="A masonry brick">
    </div>
    <div masonry-brick ng-class="{'masonry-brick': true}">
        <img ng-src="http://lorempixel.com/g/400/400/?7152" alt="A masonry brick">
    </div>
</div>

Hope that helps

from angular-masonry.

Not using ng-repeat is due to SEO reason.

I tried the above code ng-class={'masonry-brick': true} and it didn't work. The 3 classes ng-scope loaded masonry-brick are set in the div but their positions are still the same. Do you have working example?

from angular-masonry.

Checkout https://github.com/dremonkey/angular-masonry/tree/no-ng-repeat-demo and run grunt

The only difference is in the index.html file where I added what I suggested before.

from angular-masonry.

Is your index.html a working example? Because it doesn't work for me so not sure if I missed something. See screenshot with the blank area

from angular-masonry.

hmm... that's odd. It does work for me locally... let me see if I can set up a plunkr or something for you to look at instead

from angular-masonry.

Here is a plunkr demo: http://embed.plnkr.co/jvg8AZ/preview

Hope that helps

from angular-masonry.

Oh I see the difference. If you added preserve-order, this won't work.

Here: http://plnkr.co/edit/MDo1ui

from angular-masonry.

Just want to check in if there is a workaround preserve-order issue

from angular-masonry.

Not that I am aware of

from angular-masonry.

I am experiencing a strange difference in behavior using the non ng-repeat version as well. The grid does not resize items properly in columns and spacing becomes very erratic.

from angular-masonry.

@passy you close all issues about this bug (duplicate or not), but there is no any solution for this yet. =
Probably you need to reopen one of them...

from angular-masonry.

@brutto It's a known bug with Masonry and I'm not aware of any work-arounds we can implement here. If you got any ideas, I'd be delighted to review a PR for this issue.

from angular-masonry.

Can you point me, please, how it can bug with Masonry if in clear (only
Masonry without angular) use you can implement manual blocks and masonry
display them properly?

I switched to angular masonry only yesterday so do not understand yet how
it works internally, but suddenly find this annoying "bug" and then found
several similar issues here. Almost all of them are closed as duplicated
each other (cross linked) without final explanation =)

On 4 December 2014 at 15:54, Pascal Hartig [email protected] wrote:

@brutto https://github.com/brutto It's a known bug with Masonry and I'm
not aware of any work-arounds we can implement here. If you got any ideas,
I'd be delighted to review a PR for this issue.

—
Reply to this email directly or view it on GitHub
#43 (comment)
.

from angular-masonry.