AngularJS Web application development Cookbook

Manipulating the DOM

In the previous recipe, you built a directive that didn't care what it was attached to, what it was in, or what was around it. Directives exist for you to program the DOM, and the equivalent of the last recipe is to instantiate a variable. In this recipe, you will actually implement some logic.

How to do it…

The far more common use case of directives is to create them as an HTML element attribute (this is the default behavior for restrict). As you can imagine, this allows us to decorate existing material in the DOM, as follows:

(app.js) angular.module('myApp', []) .directive('counter', function () { return { restrict: 'A', link: function (scope, el, attrs) { // read element attribute if it exists var incr = parseInt(attrs.incr ...