Creating custom AngularJS comments

An overlooked ability of AngularJS is its ability to wield directives with the intention of streamlining the development process. One awesome way to do this is by using directives to comment in your application.

How to do it…

Normally, nesting HTML comments requires variable syntax as shown here:

<!--
<div>
  <p>I am the outer comment</p>
  <!- -
    <p>I am the inner comment</p>
  - ->
</div>
-->

This is completely obnoxious. It would be much better to be able to add comments anywhere without having to worry about which comments are already in place. Since the HTML comment convention doesn't suit your needs, you are able to just make your own comment directive, as follows:

(app.js)

angular.module('myApp', [])
.directive('x', function() {
  return {
    restrict: 'AE',
    compile: function(el) {
      el.remove();
    }
  };
});

Now, you are able to do the following,...