Geek Answers Handbook

How to make Angular use jQuery over jqLite

In my project, I use jQuery and angular. I installed them through bower and I use a browser to download files. This seems to work fine, except for angular jqLite is used. When i try to run

angular.element(".workItem").hide();

I get an error: jqLite does not support the query selector. How can I get around this and make angular use jQuery?

I want to use angular.element over $ for testing purposes.

Thanks!

+4
source share
2 answers

From docs :

To use jQuery, just make sure it is loaded before the angular.js file.

So, in your index.html file you need something like this:

 <html> <head> <script src='jquery.js'></script> <script src='angular.js'></script> </head> </html>

After that, angular.element should work as a replacement for $ :

If jQuery is available, angular.element is an alias for the jQuery function. If jQuery is not available, the angular.element delegates to the Angular built-in subset of jQuery called "jQuery lite" or "jqLite".

Those. angular.element('.foo') will be the same as $('.foo') .

+4
source

To make it work with the browser, you need to require it: add the jquery dependency to bower and execute in the main file:

 require('jquery'); global.jQuery = require('jquery'); global.$ = jQuery;

While here, this is not visible due to the browser, because the link is only in bower. So use browser scroll to make glue:

  • Install browserify-shim
  • In your .json package add:
  "browserify": { "transform": [ "browserify-shim" ] }, "browser": { "jquery": "./bower_components/jquery/dist/jquery.js"

See https://github.com/thlorenz/browserify-shim for full details.

+1
source

More articles:


All Articles