JS errors

[leads]

Quite possibly an issue with my code or with how I installed it but trying to use the example code gives the following errors:
ReferenceError: Packery is not defined
at Object.Packery

I had to install it by putting this in the bower file:
"angular-packery" : "1.0.3"
and running bower install

I've added 'angular-packery' to the module list, but do I need to include any other dependencies?

Thanks

[joshuahiggins]

angular-packery's bower dependencies includes Packery itself, but does not bundle the code. You still need to ensure that Packery is included in your HTML includes, along with angular-packery.

[leads]

Of course.

Sorted that but now it's saying 'Draggabilly is not defined' even though I thought it was optional...

[joshuahiggins]

At this point in time, Draggabilly is enabled by default. This is an oversight that we will be addressing in the next version update (issue #16). In the meantime, drag needs to be disabled if not desired:

<packery draggable="false">

[leads]

Thanks.
Working, ish, as the height isn't being calculated properly but I guess that's something else I've missed :)

[joshuahiggins]

Can you put together an example of the issue on Plunker? Height of items is based on the CSS height of provided to the sizer class, as noted on the README doc.

[leads]

Yeah I'll get something up.
Angular Masonry works ok, at a guess I'd say it's something to do with ImagesLoaded
https://github.com/passy/angular-masonry

[leads]

So first Plunkr shows the images:
http://plnkr.co/edit/rAPPSWGd51KJZ3SfYUty?p=preview
though the layout doesn't seem right.

Second example is more similar to the setup I have on the project, but typically it shows the images!
http://plnkr.co/edit/ePijl5PstKW4mnpTMPsS?p=preview

however, there is a layout issue
http://plnkr.co/edit/ePijl5PstKW4mnpTMPsS?p=preview

I can't have CSS classes because each image I get back is going to be a different size.

So maybe I've missed the point of Packery?

[joshuahiggins]

Here's a breakdown of the implementation issues...

Yours: http://plnkr.co/edit/rAPPSWGd51KJZ3SfYUty?p=preview
Fixed: http://plnkr.co/edit/N5Mu1ZagE4wnX0F8uXWQ?p=preview

In this one, you had the .packery-object CSS set to height:500px; width:360px; and this caused images to take up that amount of space, no matter their size. I removed this CSS.

Additionally, .packery-sizer CSS sets the minimum size of your grid cells, and in your example it was also height:500px; width:360px; as well, so I adjusted it to height: 1px; width: 1px; as I see you're doing varying sizes and want them all to flow side by side within the container.

Yours: http://plnkr.co/edit/ePijl5PstKW4mnpTMPsS?p=preview
Fixed: http://plnkr.co/edit/HOOVkcxei2RIjHQxHOrH?p=preview

Similar issue as before... .packery-sizer had no grid sizing CSS. I opened issue #28 to address setting default grid cell sizes to 1x1 pixel when no sizing is found. In the meantime, .packery-sizer should have a CSS class of height: 1px; width: 1px; if you do not wish to set a larger grid size.

The third example is the same as the second one. So that fix will address it as well.

[leads]

Oh wow, thanks very much. I actually had a lot more success with angular-masonry which I guess is very similar to this. So I'll compare the two. Thanks again.

[joshuahiggins]

Closing in favor of issue #28.