Diretiva AngularJS Restringir A vs E

112

Estou trabalhando em uma pequena equipe, construindo em AngularJS e tentando manter alguns padrões básicos e melhores práticas; especialmente porque somos relativamente novos no Angular.

Minha pergunta é em relação às Diretivas. Mais precisamente, as restrictopções.

Alguns de nós estão usando restrict: 'E'assim tendo <my-directive></my-directive>no html.

Outros estão usando restrict: 'A'e tendo <div my-directive></div>no html.

Então, é claro, você pode usar restrict: 'EA'e usar qualquer um dos itens acima.

No momento não é grande coisa, embora quando este projeto estiver tão grande quanto pode ser, eu gostaria que qualquer pessoa olhando para ele entendesse facilmente o que está acontecendo.

Existem prós / contras no modo de fazer as coisas de atributo ou elemento?

Existem armadilhas que devemos saber, ao escolher dizer elemento em vez de atributo?

javascript html angularjs

— Darren Wainwright
fonte

100

De acordo com a documentação :

Quando devo usar um atributo em vez de um elemento? Use um elemento ao criar um componente que está no controle do modelo. O caso comum para isso é quando você está criando um idioma específico de domínio para partes do seu modelo. Use um atributo quando estiver decorando um elemento existente com uma nova funcionalidade.

Edite o seguinte comentário sobre as armadilhas para obter uma resposta completa:

Supondo que você esteja criando um aplicativo que deve ser executado no Internet Explorer <= 8, cujo suporte foi retirado pela equipe do AngularJS do AngularJS 1.3, você deve seguir as seguintes instruções para fazê-lo funcionar: https: //docs.angularjs .org / guide / ie

— ngasull
fonte

3

Eu li esses documentos, mas perdi este :) obrigado.

— Darren Wainwright

3

Esta explicação não cobre nenhuma armadilha e prós / contras.

— Konstantin Krass de

Atualizei minha resposta de acordo com as armadilhas. Não mencionei prós / contras porque acho que estamos falando mais sobre as melhores práticas aqui, especialmente quando recomendado e explicado pela equipe Angular.

— ngasull

1

"Não mencionei prós / contras porque acho que estamos falando mais sobre as melhores práticas aqui, especialmente quando recomendado e explicado pela equipe Angular." Hã? :)

— Alexander Mills

169

restrito é para definir o tipo de diretiva, e pode ser A(Atributo), C(Classe), E(Elemento) e M(coMment), vamos supor que o nome da diretiva seja Doc:

Tipo: Uso

A = <div Doc></div>

C = <div class="Doc"></div>

E = <Doc data="book_data"></Doc>

M = 

— Seif Tamallah
fonte

2

menos claro do que a resposta de @nikunj, mas depois de ver a resposta deles eu entendo a sua ...

— Alexander Mills

47

A opção de restrição é normalmente definida como:

'A' - corresponde apenas ao nome do atributo
'E' - corresponde apenas ao nome do elemento
'C' - corresponde apenas ao nome da classe
'M' - corresponde apenas ao comentário

Aqui está o link da documentação .

— Nikunj Gandhi
fonte

simples e limpo

— Gaurav_0093

7

Elemento não é compatível com o IE8 pronto para uso, você precisa fazer algum trabalho para que o IE8 aceite tags personalizadas.

Uma vantagem de usar um atributo em vez de um elemento é que você pode aplicar várias diretivas ao mesmo nó DOM. Isso é particularmente útil para coisas como controles de formulário, onde você pode destacar, desabilitar ou adicionar rótulos, etc. com atributos adicionais, sem ter que envolver o elemento em um monte de tags.

— Jack Allan
fonte

5

Uma das armadilhas que eu sei é o problema do IE com elementos personalizados. Conforme citado nos documentos :

3) você não usa tags de elemento personalizado, como (use o atributo version)

4) se você usar tags de elemento personalizado, deverá seguir estas etapas para tornar o IE 8 e versões anteriores felizes

<!doctype html>
  <html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="optionalModuleName">
    <head>
      <!--[if lte IE 8]>
        <script>
          document.createElement('ng-include');
          document.createElement('ng-pluralize');
          document.createElement('ng-view');

          // Optionally these for CSS
          document.createElement('ng:include');
          document.createElement('ng:pluralize');
          document.createElement('ng:view');
        </script>
      <![endif]-->
    </head>
    <body>
      ...
    </body>
  </html>

— Khanh TO
fonte

4

Armadilha:

Usar seu próprio elemento html como <my-directive></my-directive>não funciona no IE8 sem solução alternativa ( https://docs.angularjs.org/guide/ie )
Usar seus próprios elementos html fará com que a validação de html falhe.
Diretivas com um parâmetro igual podem ser feitas assim:

<div data-my-directive="ValueOfTheFirstParameter"></div>

Em vez disso:

<my-directive my-param="ValueOfTheFirstParameter"></my-directive>

Nós não usamos elementos html personalizados, porque são dois fatos.

Cada diretiva por estrutura de terceiros pode ser escrita de duas maneiras:

<my-directive></my-directive>

ou

<div data-my-directive></div>

faz o mesmo.

— Konstantin Krass
fonte

1

se você quiser criar uma diretiva com parâmetro de escopo igual a 1, é mais fácil fazer isso com A. Porque você não precisa criar um atributo adicional.

— Konstantin Krass

O que você quer dizer com adicional? Ambas as alternativas têm exatamente um atributo.

— um oliver melhor em

3

2 problemas com elementos:

Suporte ruim com navegadores antigos.
SEO - o motor do Google não gosta deles.

Use atributos.

— Amir Popovich
fonte

As diretivas como elementos podem causar problemas de SEO? Estou surpreso. E quanto ao replaceatributo para true?

— chalasr

1

Essas afirmações precisam de referências. O ponto 1 está bem estabelecido em outro lugar, mas eu adoraria ver fontes sobre o ponto 2.

— rinogo,