Chapter 1: Manipulating the DOM

by bpall

HTML

<script src="https://code.angularjs.org/1.3.2/angular.min.js"></script>
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="">
  <p>Name: <input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>
</div>

</body>
</html>

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);
        });
      }
    };
  });