{"id":11810,"date":"2014-07-22T12:28:57","date_gmt":"2014-07-22T10:28:57","guid":{"rendered":"https:\/\/blog.trifork.com\/?p=11810"},"modified":"2014-07-22T12:28:57","modified_gmt":"2014-07-22T10:28:57","slug":"angular-directives-a-beginners-guide-part-2","status":"publish","type":"post","link":"https:\/\/trifork.nl\/blog\/angular-directives-a-beginners-guide-part-2\/","title":{"rendered":"Angular Directives, a beginners guide – part 2"},"content":{"rendered":"

\"Angular<\/p>\n

In my previous blog post (part 1<\/a>) 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<\/strong> and comment<\/strong>).
\n<\/p>\n

Usage not recommended<\/h3>\n

The class<\/code> and comment<\/code> 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:<\/p>\n

Best Practice:<\/strong>\u00a0Prefer 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.<\/em><\/p>\n

Best Practice:<\/strong>\u00a0Comment directives were commonly used in places where the DOM API limits the ability to create directives that spanned multiple elements (e.g. inside\u00a0<table>\u00a0elements). AngularJS 1.2 introduces\u00a0ng-repeat-start\u00a0and\u00a0ng-repeat-end\u00a0as a better solution to this problem. Developers are encouraged to use this over custom comment directives when possible.<\/em><\/p>\n

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.<\/p>\n

Class directive<\/h3>\n

The class<\/code> 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:<\/p>\n

\n<span class="directiveName: expression;"><\/span>\n<\/pre>\n
As mentioned by the Angular team, be really careful with naming your directives, even more when you are using a CMS<\/abbr><\/span> that will add class names to your elements for example. Although when building a custom web application this class implementation\u00a0might even prove useful.<\/p>\n
If you look at how a lot of jQuery plugins work, they also require HTML elements to contain certain classes, \u00a0which 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.<\/p>\n
Here is a\u00a0small example how a class directive could work:<\/p>\n
[codepen_embed height=”225″ theme_id=”5714″ slug_hash=”bGqHi” default_tab=”result”]See the Pen Angular Class Directive<\/a> by Dennis de Goede (@dennisdegoede<\/a>) on CodePen<\/a>.[\/codepen_embed]<\/p>\n
Comment directive<\/h3>\n
As for the comment<\/code> 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: <\/p>\n
 <!-- directive: directiveName expression --> <\/pre>\n<\/p>\n
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.\u00a0I 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.<\/p>\n
If we look at the AngularJS documentation\u00a0they 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.”<\/em><\/p>\n
Here is an example of what a comment directive looks like:<\/p>\n
[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]<\/p>\n
So should we be using these?<\/h3>\n
As long as the AngularJS team still support these types of directives I would say why not?\u00a0The 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.<\/p>\n
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,\u00a0be smart\u00a0when creating names for them.<\/p>\n
If you found my post interesting and would like to learn more you might find this AngularJS training<\/a> interesting. Thanks for reading!<\/p>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":35,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"content-type":"","footnotes":""},"categories":[366,78,10],"tags":[109,381],"class_list":["post-11810","post","type-post","status-publish","format-standard","hentry","category-angularjs-development","category-frontend","category-development","tag-angularjs","tag-directives"],"acf":[],"yoast_head":"\nAngular Directives, a beginners guide - part 2 - Trifork Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/trifork.nl\/blog\/angular-directives-a-beginners-guide-part-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular Directives, a beginners guide - part 2 - Trifork Blog\" \/>\n<meta property=\"og:description\" content=\"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 […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/trifork.nl\/blog\/angular-directives-a-beginners-guide-part-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Trifork Blog\" \/>\n<meta property=\"article:published_time\" content=\"2014-07-22T10:28:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/trifork.nl\/articles\/wp-content\/uploads\/sites\/3\/2014\/07\/angularjs-logo.png.pagespeed.ce_.2SfPGmgT_b.png\" \/>\n<meta name=\"author\" content=\"Dennis de Goede\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Dennis de Goede\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/trifork.nl\/blog\/angular-directives-a-beginners-guide-part-2\/\",\"url\":\"https:\/\/trifork.nl\/blog\/angular-directives-a-beginners-guide-part-2\/\",\"name\":\"Angular Directives, a beginners guide - part 2 - Trifork Blog\",\"isPartOf\":{\"@id\":\"https:\/\/trifork.nl\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/trifork.nl\/blog\/angular-directives-a-beginners-guide-part-2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/trifork.nl\/blog\/angular-directives-a-beginners-guide-part-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/trifork.nl\/articles\/wp-content\/uploads\/sites\/3\/2014\/07\/angularjs-logo.png.pagespeed.ce_.2SfPGmgT_b.png\",\"datePublished\":\"2014-07-22T10:28:57+00:00\",\"author\":{\"@id\":\"https:\/\/trifork.nl\/blog\/#\/schema\/person\/6fd45da4df6b6ebbdfc9ce92ee77b4ca\"},\"breadcrumb\":{\"@id\":\"https:\/\/trifork.nl\/blog\/angular-directives-a-beginners-guide-part-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/trifork.nl\/blog\/angular-directives-a-beginners-guide-part-2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/trifork.nl\/blog\/angular-directives-a-beginners-guide-part-2\/#primaryimage\",\"url\":\"https:\/\/trifork.nl\/articles\/wp-content\/uploads\/sites\/3\/2014\/07\/angularjs-logo.png.pagespeed.ce_.2SfPGmgT_b.png\",\"contentUrl\":\"https:\/\/trifork.nl\/articles\/wp-content\/uploads\/sites\/3\/2014\/07\/angularjs-logo.png.pagespeed.ce_.2SfPGmgT_b.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/trifork.nl\/blog\/angular-directives-a-beginners-guide-part-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/trifork.nl\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular Directives, a beginners guide – part 2\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/trifork.nl\/blog\/#website\",\"url\":\"https:\/\/trifork.nl\/blog\/\",\"name\":\"Trifork Blog\",\"description\":\"Keep updated on the technical solutions Trifork is working on!\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/trifork.nl\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/trifork.nl\/blog\/#\/schema\/person\/6fd45da4df6b6ebbdfc9ce92ee77b4ca\",\"name\":\"Dennis de Goede\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/trifork.nl\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/fbd3a339f11b324e87ad85cd80b5baad?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/fbd3a339f11b324e87ad85cd80b5baad?s=96&d=mm&r=g\",\"caption\":\"Dennis de Goede\"},\"url\":\"https:\/\/trifork.nl\/blog\/author\/dennisgo\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Angular Directives, a beginners guide - part 2 - Trifork Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/trifork.nl\/blog\/angular-directives-a-beginners-guide-part-2\/","og_locale":"en_US","og_type":"article","og_title":"Angular Directives, a beginners guide - part 2 - Trifork Blog","og_description":"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 […]","og_url":"https:\/\/trifork.nl\/blog\/angular-directives-a-beginners-guide-part-2\/","og_site_name":"Trifork Blog","article_published_time":"2014-07-22T10:28:57+00:00","og_image":[{"url":"https:\/\/trifork.nl\/articles\/wp-content\/uploads\/sites\/3\/2014\/07\/angularjs-logo.png.pagespeed.ce_.2SfPGmgT_b.png","type":"","width":"","height":""}],"author":"Dennis de Goede","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Dennis de Goede","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/trifork.nl\/blog\/angular-directives-a-beginners-guide-part-2\/","url":"https:\/\/trifork.nl\/blog\/angular-directives-a-beginners-guide-part-2\/","name":"Angular Directives, a beginners guide - part 2 - Trifork Blog","isPartOf":{"@id":"https:\/\/trifork.nl\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/trifork.nl\/blog\/angular-directives-a-beginners-guide-part-2\/#primaryimage"},"image":{"@id":"https:\/\/trifork.nl\/blog\/angular-directives-a-beginners-guide-part-2\/#primaryimage"},"thumbnailUrl":"https:\/\/trifork.nl\/articles\/wp-content\/uploads\/sites\/3\/2014\/07\/angularjs-logo.png.pagespeed.ce_.2SfPGmgT_b.png","datePublished":"2014-07-22T10:28:57+00:00","author":{"@id":"https:\/\/trifork.nl\/blog\/#\/schema\/person\/6fd45da4df6b6ebbdfc9ce92ee77b4ca"},"breadcrumb":{"@id":"https:\/\/trifork.nl\/blog\/angular-directives-a-beginners-guide-part-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/trifork.nl\/blog\/angular-directives-a-beginners-guide-part-2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/trifork.nl\/blog\/angular-directives-a-beginners-guide-part-2\/#primaryimage","url":"https:\/\/trifork.nl\/articles\/wp-content\/uploads\/sites\/3\/2014\/07\/angularjs-logo.png.pagespeed.ce_.2SfPGmgT_b.png","contentUrl":"https:\/\/trifork.nl\/articles\/wp-content\/uploads\/sites\/3\/2014\/07\/angularjs-logo.png.pagespeed.ce_.2SfPGmgT_b.png"},{"@type":"BreadcrumbList","@id":"https:\/\/trifork.nl\/blog\/angular-directives-a-beginners-guide-part-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/trifork.nl\/blog\/"},{"@type":"ListItem","position":2,"name":"Angular Directives, a beginners guide – part 2"}]},{"@type":"WebSite","@id":"https:\/\/trifork.nl\/blog\/#website","url":"https:\/\/trifork.nl\/blog\/","name":"Trifork Blog","description":"Keep updated on the technical solutions Trifork is working on!","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/trifork.nl\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/trifork.nl\/blog\/#\/schema\/person\/6fd45da4df6b6ebbdfc9ce92ee77b4ca","name":"Dennis de Goede","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/trifork.nl\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/fbd3a339f11b324e87ad85cd80b5baad?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/fbd3a339f11b324e87ad85cd80b5baad?s=96&d=mm&r=g","caption":"Dennis de Goede"},"url":"https:\/\/trifork.nl\/blog\/author\/dennisgo\/"}]}},"_links":{"self":[{"href":"https:\/\/trifork.nl\/blog\/wp-json\/wp\/v2\/posts\/11810","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/trifork.nl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/trifork.nl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/trifork.nl\/blog\/wp-json\/wp\/v2\/users\/35"}],"replies":[{"embeddable":true,"href":"https:\/\/trifork.nl\/blog\/wp-json\/wp\/v2\/comments?post=11810"}],"version-history":[{"count":0,"href":"https:\/\/trifork.nl\/blog\/wp-json\/wp\/v2\/posts\/11810\/revisions"}],"wp:attachment":[{"href":"https:\/\/trifork.nl\/blog\/wp-json\/wp\/v2\/media?parent=11810"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/trifork.nl\/blog\/wp-json\/wp\/v2\/categories?post=11810"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/trifork.nl\/blog\/wp-json\/wp\/v2\/tags?post=11810"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}