3

Eu sei que é possível criar uma directive em AngularJS das seguintes formas:

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

Mas, qual a melhor prática? Digo, qual a razão de existir quatro maneiras? Por que eu deveria usar uma, e não outra?

A princípio, descarto o uso de class, pois não me deixa explícito o que o código estaria fazendo - que se trata de uma directive, e não de um estilo css. Pra ficar explícito e deveria fazer nomeá-la como "angular-directive", por exemplo.

Já o uso como um elemento <angular> me soa estranho em termos de semântica.

E usar como comentário, também não é explícito que isto realmente faz algo aos olhos de um programador que ve o código mas não sabe AngularJS.

Ou seja, inicialmente eu escolheria <div angular></div>, até porque já é comum o uso de atributos custom "data-" nos elementos, como recomendado pela W3C.

Mas, quais outros argumentos sobre a melhor escolha na hora de criar uma directive?

2 Respostas 2

5
+50

Pelo que li (e não cheguei a testar!), os dois únicos métodos compatíveis com as versões mais antigas do IE são as duas primeiras: diretiva como declaração de atributo e como classe.

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

Mais a mais, tags customizadas (<elemento></elemento>) não são consideradas HTML5 válido, por mais que funcionem nos browsers mais modernos.

Da mesma forma, atributos customizados também não serão aceitos, a menos que sejam iniciados por prefixo "data-" (<div data-atributo></div>). Porém, é importante notar que, se há interesse em validar o código como XHTML5, a minificação de atributos (<div data-atributo></div>) não é permitida, sendo obrigatória a explicitação dos valores dos atributos, por mais redundante ou desnecessário que possa parecer (<div data-atributo="simQueroAtivarEsteAtributo"></div>).

Até aqui, a lógica nos diz, então, que o "mais correto" seria utilizar o formato de diretiva como classe. Porém, conforme discutido neste texto de Jeremy Zerr, a própria documentação do AngularJS nos indica usar

  • Diretiva como elemento quando a diretiva implementar um elemento completamente novo;

  • Diretiva como atributo quando a diretiva apenas modificar as funcionalidades um elemento já existente;

Logo, baseado nisso e no restante da discussão da página dele, ele organiza um resuminho que achei bem útil e vou traduzir (de maneira livre) a seguir:

Diretrizes para boas práticas nas Diretivas AngularJS

  1. Use sua diretiva como um nome de elemento ao invés de atributo quando você estiver no controle do template
  2. Use sua diretiva como um atributo ao invés de um nome de elemento quando você estiver adicionando funcionalidade a um elemento já existente
  3. Se você de fato usar uma diretiva como elemento, adicione um prefixo a ele [e a todas as outras diretivas como elementos] para evitar conflitos de nome com futuras versões do HTML5 e com possíveis outras bibliotecas [Nota: isso não faz muito sentido se os nomes das diretivas estiverem em português]
  4. Se a validação como HTML5 é um requisito, você será forçado a usar todas as diretivas como atributos com um prefixo "data-"
  5. Se a validação como XHTML5 é um requisito, as mesmas regras da validação como HTML5 se aplicam, porém ainda é necessário adicionar um "=" e um valor ao final dos atributos.
  6. Use escopo isolado quando possível, mas não se sinta derrotado se você não conseguir isolar o escopo por causa da necessidade de two-way data-bind com um escopo externo.
2
  • Não sinalizei sua resposta como correta pois acredito que a resposta do João, abaixo, não está errada. Mas, a sua me trouxe alguns detalhes super interessantes e específicos, então lhe dei a recompensa.
    – rafaels88
    Commented 10/07/2014 às 2:22
  • 1
    Valeu, @rafaels88, bom saber que a resposta foi útil! Mas agora preciso ganhar mais algum pontinho pra escapar desse 666 :D haha Abraços! Commented 11/07/2014 às 12:45
2

Foram criadas quatro alternativas diferentes de gramática para atender as necessidades de todos os desenvolvedores, desde aqueles que desenvolvem para versões antigas do Internet Explorer até aqueles que desenvolvem aplicações para iOS e Android 4 com HTML5.

A gramática onde se cria novos elementos é muito expressiva e permite a criação de Linguagem Específica de Dominio no HTML. Por exemplo tags como <tabset> e <tab> podem ser organizadas como no exemplo abaixo:

      <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>

Esta é a melhor abordagem pois o codigo HTML fica claro, expressivo e conciso porém apesar de funcionar até nos Tablets e SmartPhones iOS e Android, não funciona em todos os Browsers.

A abordagem mais adequada para quem deseja que a pagina HTML funcione na maioria dos ambientes é usar atributo adicional cujo nome representa a funcionalidade.

Exemplo:

      <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>
1
  • Muito obrigado pela resposta João. Adicionou mais conhecimento a questão.
    – rafaels88
    Commented 10/07/2014 às 2:23

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .