Chapter 1: Manipulating the DOM

by msfrisbie

HTML

<script src="https://code.angularjs.org/1.3.2/angular.min.js"></script>
<div ng-app="myApp">
    <button counter></button>
    <button counter incr="5"></button>
</div>

JavaScript

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 || 1)
              , val = 0;
            // define callback for vanilla DOM click event
            el.bind('click', function () {
                el.html(val += incr);
            });
        }
    };
});