AngularJS Web Application Development Cookbook

Linking directives

For a large subset of the directives you will eventually build, the bulk of the heavy lifting will be done inside the directive's link function. This function is returned from the preceding compile function, and as seen in the previous recipe, it has the ability to manipulate the DOM in and around it.

How to do it…

The following directive will display NW, NE, SW, or SE depending on where the cursor is relative to it:

angular.module('myApp', []) .directive('vectorText', function ($document) { return { template: '<span>{{ heading }}</span>', link: function (scope, el, attrs) { // initialize the css el.css({ 'float': 'left', 'padding': attrs.buffer+"px" }); // initialize the scope variable scope.heading = ''; // set event listener ...