Angularjs Directive - Good practice

Question

I know it is possible to create a Directive in Angularjs in the following ways:

<div angular></div>
<div class="angular"></div>
<angular></angular>
<!-- directive: angular -->

But, what is the best practice? I mean, why are there four ways? Why should I use one and not another?

At first, I discard the use of class, because it doesn’t make me explicit what the code would be doing - which is a Directive, not a css style. To be explicit and should name it as "angular-Directive", for example.

I already use it as an element <angular> sounds strange to me in terms of semantics.

And to use as a comment, it’s also not explicit that this actually does something in the eyes of a programmer who sees the code but doesn’t know Angularjs.

I mean, initially I would choose <div angular></div>, because it is already common to use custom "data-" attributes in the elements, as recommended by W3C.

But, what other arguments about the best choice when creating a Directive?

Answer 1

From what I read (and didn’t get to test!), the only two methods compatible with older versions of IE are the first two: directive as attribute declaration and as class.

<div atributo></div>
<div class="classe"></div>

More to the point, custom tags (<elemento></elemento>) are not considered valid HTML5, even though they work in the most modern browsers.

Similarly, custom attributes will also not be accepted unless they are started by "date prefix-" (<div data-atributo></div>). However, it is important to note that if there is interest in validating the code as XHTML5, the minification of attributes (<div data-atributo></div>) is not permitted, it is mandatory to specify the values of the attributes, however redundant or unnecessary it may seem (<div data-atributo="simQueroAtivarEsteAtributo"></div>).

So far, logic tells us, then, that the "most correct" would be to use the directive format as a class. However, as discussed in this text by Jeremy Zerr, the Angularjs documentation itself tells us to use

• Directive as an element when the Directive implements a completely new element;

• Directive as an attribute when the directive only modifies the functionalities of an existing element;

Soon, based on this and the rest of the discussion on his page, he organizes a brief that I found very useful and I will translate (freely) next:

Guidelines for good practice in the Angularjs Directives

1. Use your directive as an element name instead of an attribute when you’re in control of the template
2. Use your directive as an attribute instead of an element name when you’re adding functionality to an element already existing
3. If you do indeed use a directive as an element, add a prefix to it [and all other directives as elements] to avoid name conflicts with future versions of HTML5 and with possible other libraries [Note: this does not make much sense if the names of directives are in English]
4. If validation as HTML5 is a requirement, you will be forced to use all directives as attributes with a "date prefix-"
5. If validation as XHTML5 is a requirement, the same validation rules as HTML5 apply, but it is still necessary to add a "=" and a value at the end of the attributes.
6. Use isolated scope when possible, but don’t feel defeated if you can’t isolate the scope because of the need to two-way data-bind with an external scope.

Answer 2

Four different grammar alternatives have been created to meet the needs of all developers, from those developing for older versions of Internet Explorer to those developing apps for iOS and Android 4 with HTML5.

The grammar for creating new elements is very expressive and allows the creation of Specific Language of Dominio in HTML. For example tags like <tabset> and <tab> can be arranged as in the example below:

      <tabset justified="false">
          <tab heading="Tab 1">
            <div class="detail">
               Conteudo da Tab 1
            </div>
          </tab>
          <tab heading="Tab 2">
            <div class="detail">
               Conteudo da Tab 2
            </div>
          </tab>
      </tabset>

This is the best approach because the HTML code is clear, expressive and concise but even though it works even in iOS and Android Tablets and Smartphones, does not work in all Browsers.

The most appropriate approach for those who want the HTML page to work in most environments is to use an additional attribute whose name represents the functionality.

Example:

      <div tabset justified="false">
          <div tab heading="Tab 1">
            <div class="detail">
               Conteudo da Tab 1
            </div>
          </div>
          <div tab heading="Tab 2">
            <div class="detail">
               Conteudo da Tab 2
            </div>
          </div>
      </div>