<div ng-app="mainModule">
  <div ng-controller="mainController">
    <h3> Directive as comment</h3>
    <!-- directive: comment-dir Directive with restrict M -->
    <br />
  </div>
</div>
angular.module("mainModule", [])
  .controller("mainController", function ()
  {
  })
  .directive("commentDir", function ($compile)
  {
    return {
      scope: true,
      restrict: "M",
      link: function (scope, element, attrs)
      {
        // Add a new DOM node after the comment just to show the output
        element.after($compile("<span><strong>commentDir:</strong> {{value}}</span>")(scope));
        scope.value = attrs.commentDir;
      }
    };
  });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js