Code


<!DOCTYPE html> <html> <head> <script src="angular.js"></script> <script src="script.js"></script> </head> <body ng-app="mainModule"> <div ng-controller="mainController"> <h3>1. Directive as element</h3> <element-dir></element-dir><br /> <br /> <h3>2. Directive as attribute</h3> <div attribute-dir="attribute value"></div> <br /> <h3>3. Directive as class</h3> <div class="class-dir: class value;"></div> <br /> <h3>4. Directive as comment</h3> <!-- directive: comment-dir comment value --> <br /> </div> </body> </html>
angular.module("mainModule", []) .controller("mainController", function () { }) .directive("elementDir", function () { return { scope: true, restrict: "E", template: "<strong>elementDir</strong>" }; }) .directive("attributeDir", function () { return { scope: true, restrict: "A", template: "<strong>attributeDir:</strong> {{value}}", link: function (scope, element, attrs) { scope.value = attrs.attributeDir; } }; }) .directive("classDir", function () { return { scope: true, restrict: "C", template: "<strong>classDir:</strong> {{value}}", link: function (scope, element, attrs) { scope.value = attrs.classDir; } }; }) .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; } }; });

Example


Description


With the restrict property of a directive's definition object we can decide where our directive can appear in the DOM. We have four options:

  • Element
    restrict: 'E'

    The directive can appear only as HTML element.

    Example:
    <my-directive></my-directive>

  • Attribute
    restrict: 'A'

    The directive can appear only as HTML attribute in an element. This is the default value if restrict is not specified.

    Example:
    <div my-directive="expression"></div>

  • Class
    restrict: 'C'

    The directive can appear only inside a class attribute of a HTML element.

    Example:
    <div class="my-directive: expression;"></div>

  • Comment
    restrict: 'M'

    The directive can appear only inside a HTML comment.

    Example:
    <!-- directive: my-directive expression -->

NOTE: restrict could be also any combination of the four options, so for example, if we want a directive to be allowed both as element and attribute, we could assign the 'EA' value to restrict and if we want it to be allowed in any case we could assign 'EACM'.

In the example we see all the different options and how we can retrieve the expression value of the directive depending on the chosen option. In commentDir using template in the definition object doesn't work, so we add a DOM node in post-link function just to show the output.

Depending on what kind of DOM manipulations a directive needs to do, not everything might be supported in all the four restrict options, so to be sure that all you need is always supported I would recommend using just the E (element) and A (attribute) options.

NOTE: some old browsers might complain if a directive is specified as element because they don't understand it as a valid HTML element (e.g. old versions of Internet Explorer).