jqLite implements only some of the methods that the full jQuery library provides, and some of those methods—as I noted in the tables in earlier sections—don’t offer all of the options that jQuery programmers are used to.
The emphasis of jqLite is on speed, simplicity, and size, and once you get used to the limited set of methods available, you will find that you can achieve everything you need to do in a directive, even if the result is less elegant than it would be with the full range of jQuery methods and features available. Consider that all of the built-in AngularJS directives are built using jqLite, and you will understand that all of the essential features are available.
If, however, you really can’t stand to work with jqLite, then you can replace it with the full jQuery library. In Listing 15-20, you can see how I have done this in the directives.html file and used some of the jQuery methods that are not available in jqLite to simplify the custom directive.
■ Tip If you use the full jQuery library, you will require browsers to download and process a second JavaScript file, and any application that reuses your directive will also be dependent on jQuery. My advice is to spend some time getting used to jqLite and see whether you really need to make the switch to jQuery.
Listing 15-20. Replacing jqLite with jQuery in the directives.html File
…
<head>
<title>Directives</title>
<script src=”http://code.jquery.com/jquery-1.10.1.min.js”></script>
<script src=”angular.js”></script>
<link href=”bootstrap.css” rel=”stylesheet” />
<link href=”bootstrap-theme.css” rel=”stylesheet” />
<script>
angular.module(“exampleApp”, [])
.directive(“unorderedList”, function () {
return function (scope, element, attrs) {
var data = scope[attrs[“unorderedList”]];
var propertyExpression = attrs[“listProperty”];
if (angular.isArray(data)) {
var listElem = angular.element(“<ul>”).appendTo(element);
for (var i = 0; i < data.length; i++) {
(function () {
var itemElement =
angular.element(“<li>”).appendTo(listElem);
var index = i;
var watcherFn = function (watchScope) {
return watchScope.$eval(propertyExpression, data[index]);
scope.$watch(watcherFn, function (newValue, oldValue) {
itemElement.text(newValue);
});
}());
}
}
}
}).controller(“defaultCtrl”, function ($scope) {
$scope.products = [
{ name: “Apples”, category: “Fruit”, price: 1.20, expiry: 10 },
{ name: “Bananas”, category: “Fruit”, price: 2.42, expiry: 7 },
{ name: “Pears”, category: “Fruit”, price: 2.02, expiry: 6 }
];
$scope.incrementPrices = function () {
for (var i = 0; i < $scope.products.length; i++) {
$scope.products[i].price++;
}
}
})
</script>
</head>
…
I have added a script element that loads the jQuery library file from a content delivery network (CDN), which means that I can demonstrate the effect without having to add any files to the angularjs folder. First, notice that the jQuery script element appears before the one for AngularJS. AngularJS checks to see whether jQuery has been loaded before installing jqLite and so the script elements must appear in this order. If you don’t add jQuery until after AngularJS, then jqLite will be used.
The method that I miss most of all when working with jqLite is appendTo, which is one of the ways that I avoid the problems I described in the “Creating and Removing Elements” section. This method lets me create some new elements, add them to the document, and then call other jQuery methods to modify the new elements. I find the effect helpful, and it lets me replace multiple jqLite statements like this:
…
var itemElement = angular.element(‘<li>’);
listElem.append(itemElement);
…
with a single jQuery statement like this one:
…
var listElem = angular.element(“<ul>”).appendTo(element);
…
■ Tip As much as I rely on this method when working with jQuery, I rarely replace jqLite with jQuery in my own AngularJS projects. I have learned to adjust to the limitations of jqLite, and I recommend you try to do the same.
Source: Freeman Adam (2014), Pro AngularJS (Expert’s Voice in Web Development), Apress; 1st ed. edition.