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:
The directive can appear only as HTML element.
The directive can appear only as HTML attribute in an element. This is the default value if restrict is not specified.
The directive can appear only inside a class attribute of a HTML element.
<div class="my-directive: expression;"></div>
The directive can appear only inside a HTML comment.
<!-- 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).