For this chapter, I am going to continue working on the unorderedList directive that I created in Chapter 15. Before I start, I am going to return the directive to a more basic state and remove the dependency on the full jQuery library, as shown in Listing 16-1.
Listing 16-1. Preparing the directives.html File
<html ng-app=”exampleApp”>
<head>
<title>Directives</title>
<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>”);
element.append(listElem);
for (var i = 0; i < data.length; i++) {
var itemElement = angular.element(“<li>”)
.text(scope.$eval(propertyExpression, data[i]));
listElem.append(itemElement);
}
}
}
}).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 }
];
})
</script>
</head>
<body ng-controller=”defaultCtrl”>
<div class=”panel panel-default”>
<div class=”panel-heading”>
<h3>Products</h3>
</div>
<div class=”panel-body”>
<div unordered-list=”products” list-property=”price | currency”>
</div>
</div>
</div>
</body>
</html>
Source: Freeman Adam (2014), Pro AngularJS (Expert’s Voice in Web Development), Apress; 1st ed. edition.