Angular Directives, a beginners guide – part 2
In my previous blog post (part 1) about Angular Directives, I provided you with an introduction into what Directives are and how to use them. The short recap is that you can use Directives to add markers to a DOM element and then tell the AngularJS compiler to add behavior or modify that element. In this blog post, I will discuss the two remaining directive types (class and comment).
Usage not recommended
The class and comment directive types are not widely used, and if we look at the AngularJS page, then we understand why. Let’s read what they themselves write about these two directives:
Best Practice: Prefer using directives via tag name and attributes over comment and class names. Doing so generally makes it easier to determine what directives a given element matches.
Best Practice: Comment directives were commonly used in places where the DOM API limits the ability to create directives that spanned multiple elements (e.g. inside <table> elements). AngularJS 1.2 introduces ng-repeat-start and ng-repeat-end as a better solution to this problem. Developers are encouraged to use this over custom comment directives when possible.
So, they recommend not using these two directives, however there are specific cases where you might want or have to use them. Therefore, I will discuss them in this blog entry.
Class directive
The class directive will be bound by specifying a class on a element, this can be done with solely the class name or with attributes, the notation will look something like this:
<span class="directiveName: expression;"></span>
As mentioned by the Angular team, be really careful with naming your directives, even more when you are using a CMS that will add class names to your elements for example. Although when building a custom web application this class implementation might even prove useful.
If you look at how a lot of jQuery plugins work, they also require HTML elements to contain certain classes, which are picked up by the javascript looking for those specific class names. It might be so that this behavior is not as strange as the Angular team makes it out to be. The trick with using the class directive is being specific when naming it on its behavior or on what it modifies, then the user or developer looking into the code will understand its function.
Here is a small example how a class directive could work:
[codepen_embed height=”225″ theme_id=”5714″ slug_hash=”bGqHi” default_tab=”result”]See the Pen Angular Class Directive by Dennis de Goede (@dennisdegoede) on CodePen.[/codepen_embed]
Comment directive
As for the comment directive (this will be even stranger), it will call the directive through a comment line (not to be confused with command line). To give you an example, it will look something like this:
<!-- directive: directiveName expression -->
The same rules apply for comment as for classes, be mindful of naming your directives. Make sure it will be clear to other developers what you are doing or what you are trying to achieve, as comments are normally not used for executing code. I could imagine developers wanting to use this functionality to develop or debug a directive, but other then that it might be a good idea to use the element or attribute directive.
If we look at the AngularJS documentation they mention why comment directives were introduced: “Comment directives were commonly used in places where the DOM API limits the ability to create directives that spanned multiple elements (e.g. inside <table> elements). AngularJS 1.2 introduces ng-repeat-start and ng-repeat-end as a better solution to this problem. Developers are encouraged to use this over custom comment directives when possible.”
Here is an example of what a comment directive looks like:
[codepen_embed height=”225″ theme_id=”5714″ slug_hash=”gnyzk” default_tab=”result”]See the Pen <a href=’http://codepen.io/dennisdegoede/pen/gnyzk/’>Angular Comment Directive</a> by Dennis de Goede (<a href=’http://codepen.io/dennisdegoede’>@dennisdegoede</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]
So should we be using these?
As long as the AngularJS team still support these types of directives I would say why not? The comment directive is still a bit vague on how you should really be using it, but for the class directive I could think of a few implementations that would work nicely. Consider using a CMS spitting out all kinds of elements with classnames on them, might be nice to create a hook there.
Still be mindfull, don’t create your directives to be totally dependant on comments or classes, as it might be deprecated (and removed) in future versions of AngularJS. If you still choose to use them, be smart when creating names for them.
If you found my post interesting and would like to learn more you might find this AngularJS training interesting. Thanks for reading!
