angular-masonry

angular-masonry copied to clipboard

I have multiple pages (views) where I use masonry. At random moments (but pretty often), when I go from page 1 to page 2, then back to page 1, the masonry-bricks appear overlapped and I get this in the console:

cannot call methods on masonry prior to initialization; attempted to call 'resize'
cannot call methods on masonry prior to initialization; attempted to call 'appended'

I load the products array through ajax in a controller. Here's the code with the usage of masonry:

<div id="curated-products" masonry="{gutter: '.gutter-sizer', transitionDuration:'0', isFitWidth: true}" style="margin-left:auto; margin-right: auto" ng-cloak>
    <div class="gutter-sizer" style="width: 10px"></div>
    <div class="masonry-brick li-card" ng-repeat="product in products">
        <div class="li-product-cover">
            <a href="{{ product.productUrl }}">
                <img ng-src="{{ product.imageUrl }}" alt="{{ product.name }}" style="width:100%;">
            </a>
        </div>
        <a href="{{ product.productUrl }}" class="li-product-name">{{ product.name }}</a>
    </div>
</div>

I must be doing something wrong, as I saw this issue being closed before.

Apparently, removing ng-cloak makes the bricks overlap a lot less often, but the two errors still appear. Does anyone have an idea why?

+1, got the same problem

Hey guys, any idea about this? :D

I found out a bit more about this error. It is generated by jquery-bridget when masonry methods are being called without the namespace being initialised.

I am also not running on the latest release (currently 0.11.0), so I will fill in more information after I make the migration of the other dependencies.