Chapter 1: Linking directives

by msfrisbie

HTML

<script src="https://code.angularjs.org/1.3.2/angular.min.js"></script>
<div ng-app="myApp">
    <div buffer="300" vector-text></div>
</div>

JavaScript

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 and handler
            $document.on('mousemove', function (event) {
                // mousemove event does not start $digest,
                // scope.$apply does this manually
                scope.$apply(function () {
                    if (event.pageY < 300) {
                        scope.heading = 'N';
                    } else {
                        scope.heading = 'S';
                    }
                    if (event.pageX < 300) {
                        scope.heading += 'W';
                    } else {
                        scope.heading += 'E';
                    }
                });
            });
        }
    };
});