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

Welcome to Stackoverflow. Your question is too broad. Please read [How To Ask](http://stackoverflow.com/help/how-to-ask) and [mcve](http://stackoverflow.com/help/mcve) and update your question accordingly. — kkuilla, Apr 22 '15 at 09:16

score 4 · Answer 1 · answered Apr 22 '15 at 13:39

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!

score 2 · Answer 2 · edited Aug 24 '15 at 10:55

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 -->

works for me. I had to load jquery.bridget before masonry and imagesLoaded — mcranston18, Sep 17 '15 at 14:09

score 1 · Answer 3 · answered May 31 '15 at 15:07

You need to install jquery bridget plugin:

bower install --save jquery-bridget

If you use grunt-wiredep, than you should get the following order of scripts in your html (second part of scripts list should have exactly the same order: jquery.bridget.js and then other scripts!) :

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

<script src="/vendor/jquery-bridget/jquery.bridget.js"></script>
<script src="/vendor/get-style-property/get-style-property.js"></script>
<script src="/vendor/get-size/get-size.js"></script>
<script src="/vendor/eventie/eventie.js"></script>
<script src="/vendor/doc-ready/doc-ready.js"></script>
<script src="/vendor/eventEmitter/EventEmitter.js"></script>
<script src="/vendor/matches-selector/matches-selector.js"></script>
<script src="/vendor/outlayer/item.js"></script>
<script src="/vendor/outlayer/outlayer.js"></script>
<script src="/vendor/masonry/masonry.js"></script>
<script src="/vendor/imagesloaded/imagesloaded.js"></script>
<script src="/vendor/angular-masonry/angular-masonry.js"></script>
<!-- endbower -->

And here is a part of my bower.json file:

{
  ...
  "dependencies": {
    "jquery": "~2.1.4",
    "angular": "~1.3.15",
    "angular-resource": "~1.3.15",
    "angular-route": "~1.3.15",
    "angular-masonry": "~0.11.0",
    "jquery-bridget": "~1.1.0"
  }
}

With all this configuration angurlar-masonry is working as expected.

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

3 Answers3