angularjs passy masonry - TypeError: element.masonry is not a function

Question

I'm having this error using the passy masonry. Any idea what does it mean?Cause basically right now the masonry doesn't work for me at all.

Thanks in advance

Answer 1

I'm not sure what the cause of your issue is, but I was just dealing with the same thing, and I was able to resolve it by messing around with dependencies. After some trial and error, I noticed that I was missing a dependency for one of angular-masonry's dependecies, called jquery-bridget. I am not sure why this isn't being installed with bower-install, perhaps there is an issue with the bower.json, but anyways, if you do

bower uninstall --save angular-masonry

and then

bower install --save jquery-bridget
bower install --save angular-masonry

it MAY fix your problem. Once again, not entirely sure if this is the same issue or whether there was something wonky with my set up that I had messed up. Hope this helps!

Answer 2

I had exactly same problem before and solved by just changed "jquery.bridget.js" loading position.

<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>

<script src="bower_components/jquery-bridget/jquery.bridget.js"></script>

<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="bower_components/angular-local-storage/dist/angular-local-storage.js"></script>
<script src="bower_components/get-style-property/get-style-property.js"></script>
<script src="bower_components/get-size/get-size.js"></script>
<script src="bower_components/eventie/eventie.js"></script>
<script src="bower_components/doc-ready/doc-ready.js"></script>
<script src="bower_components/eventEmitter/EventEmitter.js"></script>
<script src="bower_components/matches-selector/matches-selector.js"></script>
<script src="bower_components/outlayer/item.js"></script>
<script src="bower_components/outlayer/outlayer.js"></script>
<script src="bower_components/masonry/masonry.js"></script>
<script src="bower_components/imagesloaded/imagesloaded.js"></script>
<script src="bower_components/angular-masonry/angular-masonry.js"></script>
<!-- endbower -->