Preparing the Example Project

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”>



<script src=”angular.js”></script>

<link href=”bootstrap.css” rel=”stylesheet” />

<link href=”bootstrap-theme.css” rel=”stylesheet” />


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>”);


for (var i = 0; i < data.length; i++) {

var itemElement = angular.element(“<li>”)

.text(scope.$eval(propertyExpression, data[i]));





}).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 }





<body ng-controller=”defaultCtrl”>

<div class=”panel panel-default”>

<div class=”panel-heading”>



<div class=”panel-body”>

<div unordered-list=”products” list-property=”price | currency”>






Source: Freeman Adam (2014), Pro AngularJS (Expert’s Voice in Web Development), Apress; 1st ed. edition.

Leave a Reply

Your email address will not be published. Required fields are marked *