Having some difficulties implementing the Angular Masonry Directive by klederson in a project. The elements are taking up space in the body tag but not appearing visible, and an error message is being displayed in the console.
Including the masonry dependency:
angular.module("cardSite",['masonry'])
This is the markup I'm using to call masonry. Even when trying the JS approach, the same error persists.
<div masonry='{ "transitionDuration" : "0.4s" , "itemSelector" : ".grid-item"}' class="grid">
<div masonry-tile class="grid-item">...</div>
<div masonry-tile class="grid-item grid-item--width2">...</div>
<div masonry-tile class="grid-item--height2">...</div>
<div masonry-tile class="grid-item">...</div>
<div masonry-tile class="grid-item">...</div>
<div masonry-tile class="grid-item grid-item--width2">...</div>
<div masonry-tile class="grid-item--height2"></div>
<div masonry-tile class="grid-item">...</div>
<div masonry-tile class="grid-item">...</div>
<div masonry-tile class="grid-item grid-item--width2">...</div>
<div masonry-tile class="grid-item">...</div>
<div masonry-tile class="grid-item">...</div>
<div masonry-tile class="grid-item--height2"></div>
<div masonry-tile class="grid-item grid-item--width2">...</div>
<div masonry-tile class="grid-item">...</div>
<div masonry-tile class="grid-item--height2"></div>
<div masonry-tile class="grid-item">...</div>
<div masonry-tile class="grid-item grid-item--width2">...</div>
<div masonry-tile class="grid-item">...</div>
</div>
Script is being called at the bottom of the page:
<script src="scripts/directives/angular-masonry-directive.js"></script>
URL of the relevant page:
Screenshot of the error: https://i.sstatic.net/EzXnT.png
Plunker link: https://plnkr.co/edit/vzhUUtKtrZWxCwMITOL6?p=preview