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,

Diretiva AngularJS Restringir A vs E

Respostas: