Angularjs passy masonry - TypeError: element.masonry is not a function
I have this error using passive masonry. Any idea what this means? Because currently masonry doesn't work at all for me.
Thank you in advance
I'm not sure what the cause of your problem is, but I was 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 the angular-masonry dependecies called jquery-bridget. I'm not sure why this is not installed with bower-install, there might be a problem with bower.json, but anyway if you do
bower uninstall --save angular-masonry
and then
bower install --save jquery-bridget
bower install --save angular-masonry
MAY fix your problem. Again, not entirely sure if this is the same problem, or if there was something awkward with my setup that I messed up. Hope this helps!
You need to install the jquery bridget plugin :
bower install --save jquery-bridget
If you are using grunt-wiredep you should get the following order of the scripts in your html (the second part of the list of scripts should be in 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 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 works as expected.
I had exactly the same problem and was only solved with changed boot position "jquery.bridget.js".
<!-- 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 -->