Angularjs passy masonry - TypeError: element.masonry is not a function
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!
source to share
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.
source to share
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 -->
source to share