Accessing jQuery or jQuery Lite Directly

More often than not, you will be using the jQuery or jQuery lite functionality in jQuery objects that AngularJS creates for you. All element references in AngularJS are always wrapped as jQuery or jQuery lite objects; they are never raw DOM objects.

For example, when you create a directive in AngularJS as discussed later in this book, an element is passed to the link function. That element, as shown here, is a jQuery or jQuery lite object, and you can use the jQuery functionality accordingly:

Click here to view code image

angular.module('myApp', [])
 .directive('myDirective', function() {
      . . .
      link: function(scope, elem, attrs, photosControl) {
        //elem is a jQuery lite object
        elem.addClass(...);
      }
    };

Another example of accessing the jQuery functionality is from events that are triggered on AngularJS bindings. For example, consider the following code that uses the ngClick binding to bind a browser click event on a <div> element to a clicked() function in the AngularJS code:

Click here to view code image

<div ng-click="clicked($event)">Click Me</div>
You can access a jQuery version of the object using the following AngularJS code:
$scope.clicked = function(event){
  var jQueryElement = angular.element(event.target);
};

Note that it was necessary to use the angular.element() method to convert the target DOM object into a jQuery object.