Out of the box, AngularJS provides jqLite, which is a jQuery-like library that provides a subset of jQuery functionality. If you include jQuery in your page, however, AngularJS will use jQuery instead of jqLite when wrapping elements within your directives. Until recently, however, I had only ever thought about this integration in terms of how the element references were presented; it never occurred to me that "angular.element" was actually an alias to the jQuery constructor function.
This is not a post about whether or not you should be using jQuery in your AngularJS applications. I know that a lot of the "cool kids" are saying that if you use AngularJS, you don't need jQuery. Well, I'm a loner, Dottie, a rebel; personally, I think that jQuery adds a lot of value, especially with features like event delegation that facilitates deferred transclusion.
That said, this post is about what the jQuery-AngularJS integration looks like when you use it. Not only are your directive elements wrapped in jQuery containers, the angular.element() method is actually a direct reference to the jQuery() constructor function. This means that you have access to the full suite of jQuery features without needing a reference to the jQuery or "$" global references.
This means that angular.element contains all of the core jQuery functions, like jQuery.contains() and jQuery.proxy(). It also means that the "fn" prototype lives on the angular.element object, allowing jQuery plugins to be defined off of angular.element.
To explore this, I've created a small demo that uses an AngularJS directive that defines and consumes two new "jQuery" plugins. What you'll notice here is that I never make any reference to jQuery or to "$" - only to angular.element.
As you can see, I am defining "jQuery plugins" on the angular.element.fn prototype, which is, of course, the jQuery fn prototype. Right now, I'm defining them inside of the directive factory; but, they might make more sense inside of an AngularJS .run() block so that they are a bit more reusable and a bit less coupled to the directive.
Again, this post isn't an argument for or against using jQuery in your AngularJS applications - that's a decision that should be made on a per-project basis. I happen to love jQuery and find it adds powerful features. But, regardless, I wanted to demonstrate that if you are using jQuery, the angular.element() method exposes the full array of jQuery functionality.
Want to use code from this post? Check out the license.