Angular JS - Adding jQuery Plugin to jQlite
I need to do some dom traversal on the $ element, but jQuery or jQlite doesn't do what I need out of the box, so I need to use a jQuery plugin called closestChild.
https://github.com/lolmaus/jquery.closestchild/blob/master/jquery.closestchild.js
I installed with bower and I am trying to load it after angular.min.js in script tags but still get the following error.
Uncaught TypeError: Cannot read property 'fn' of undefined
So my guess is that the jQlite that comes with Angular isn't giving you $ working by default? Or am I just doing things in the wrong order?
source to share
No, angular.element
(jqLite) does not export a global variable $
. So you can't just use a jQuery plugin with Angular without jQuery. In some cases, you can get around this by manually creating the link $
before including the plugin, as if it were jQuery. For example, for example:
<script src="path-to-angular.js"></script>
<script>
window.$ = window.jQuery = angular.element;
window.$.fn = window.$.prototype;
</script>
<script src="path-to-jquery.plugin.js"></script>
However, it won't work in your case, because the plugin of interest uses a method $.fn.filter
that jqLite does not implement. Below is a list of all available angular.element .
You can implement some of these yourself and include before the plugin.
However, I would recommend using jQuery if you want to use jQuery plugins.
source to share
jQlite does not support jQuery plugins. In fact, it is meant for a lightweight selector, not a heavy tool that supports an extension like jQuery.
You have two options:
- Use JavaScript to implement the functionality (element.getElementBySelector ('foo) [0]).
- Include jQuery in your project.
I personally would use option 1.
source to share