CHApTer 5 ■ DIreCTIveSWithin the forEach loop, we do the append operation by creating a div element as a string value that is
constructed using the current array item (the CSS color name). This is used as both the value of the background-color
CSS rule and as the literal text that displays within the div.
var appendString = "
colorContainer.append(appendString);
Both the HTML page that uses the directive and the module that contains the directive and controller code are
shown in Listing 5-10 and Listing 5-11, respectively.
Listing 5-10. product-detail.html, Revised to Use a Custom Directive
<!DOCTYPE html >
AngularJS Socks
Keep warm this winter with our 100% wool, 100% cool, AngularJS socks!
Listing 5-11. The Application Module Containing Our Directive Registration and Our Controller
// declare a module
var myAppModule = angular.module('myAppModule', []);
myAppModule.controller('myDemoCtrl', function ($scope) {
$scope.colorsArray = ['red', 'green', 'blue', 'purple', 'olive']
}
);
myAppModule.directive('colorList', function ($compile) {