<div ng-app="mainModule">
  <div ng-controller="mainController">
    <h3>3. Directive as class</h3>
    <div class="class-dir: Directive with restrict C;"></div>
  </div>
</div>
angular.module("mainModule", [])
  .controller("mainController", function ()
  {
  })
  .directive("classDir", function ()
  {
    return {
      scope: true,
      restrict: "C",
      template: "<strong>classDir:</strong> {{value}}",
      link: function (scope, element, attrs)
      {
        scope.value = attrs.classDir;
      }
    };
  });

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