Directiva AngularJS Restringir A vs E

113

Estoy trabajando en un equipo pequeño, construyendo en AngularJS y tratando de mantener algunos estándares básicos y mejores prácticas; especialmente dado que somos relativamente nuevos con Angular.

Mi pregunta se refiere a las Directivas. Más exactamente, las restrictopciones.

Algunos de nosotros estamos usando restrict: 'E'así tener <my-directive></my-directive>en el html.

Otros están usando restrict: 'A'y teniendo <div my-directive></div>en html.

Entonces, por supuesto, puedes usar restrict: 'EA' y usar cualquiera de los anteriores.

Por el momento no es gran cosa, aunque cuando este proyecto sea tan grande como va a llegar, me gustaría que cualquiera que lo esté mirando para entender fácilmente lo que está pasando.

¿Hay ventajas / desventajas en la forma de hacer las cosas, ya sea por atributos o elementos?

¿Hay alguna trampa que debamos conocer si elegimos un elemento sobre un atributo?

javascript html angularjs Darren Wainwright
fuente

Respuestas:

100

Según la documentación :

¿Cuándo debo usar un atributo frente a un elemento? Utilice un elemento cuando cree un componente que tenga el control de la plantilla. El caso común para esto es cuando está creando un lenguaje específico de dominio para partes de su plantilla. Utilice un atributo cuando esté decorando un elemento existente con una nueva funcionalidad.

Edite el siguiente comentario sobre las trampas para obtener una respuesta completa:

Suponiendo que está creando una aplicación que debería ejecutarse en Internet Explorer <= 8, cuya compatibilidad ha sido eliminada por el equipo de AngularJS de AngularJS 1.3, debe seguir las siguientes instrucciones para que funcione: https: //docs.angularjs .org / guide / ie

ngasull
fuente
3
He leído esos documentos de arriba abajo, pero me perdí este :) gracias.
Darren Wainwright
3
Esta explicación no cubre los inconvenientes ni los pros / contras.
Konstantin Krass
Actualicé mi respuesta en consecuencia sobre las trampas. No mencioné pros / contras porque creo que estamos hablando más sobre las mejores prácticas aquí, especialmente cuando el equipo de Angular las recomienda y explica.
ngasull
1
"No mencioné pros / contras porque creo que estamos hablando más sobre las mejores prácticas aquí, especialmente cuando las recomienda y explica el equipo de Angular". eh :)
Alexander Mills
169

restrict es para definir el tipo de directiva, y puede ser A(Atributo), C(Clase), E(Elemento) y M(CoMment), supongamos que el nombre de la directiva es Doc:

Tipo: uso

A = <div Doc></div>

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

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

M = <!--directive:Doc -->

Seif Tamallah
fuente
2
menos clara que la respuesta de @nikunj, pero después de ver su respuesta, entiendo la suya ...
Alexander Mills
47

La opción de restricción generalmente se establece en:

  • 'A': solo coincide con el nombre del atributo
  • 'E': solo coincide con el nombre del elemento
  • 'C' - solo coincide con el nombre de la clase
  • 'M' - solo coincide con el comentario

Aquí está el enlace de documentación .

nikunj gandhi
fuente
simple y limpio
Gaurav_0093
7

El elemento no es compatible con IE8 de fábrica, debe hacer un trabajo para que IE8 acepte etiquetas personalizadas.

Una ventaja de utilizar un atributo sobre un elemento es que puede aplicar varias directivas al mismo nodo DOM. Esto es particularmente útil para cosas como controles de formulario donde puede resaltar, deshabilitar o agregar etiquetas, etc. con atributos adicionales sin tener que envolver el elemento en un montón de etiquetas.

Jack Allan
fuente
5

Una de las trampas que conozco es el problema de IE con los elementos personalizados. Como se cita en los documentos :

3) no usa etiquetas de elementos personalizados como (use la versión del atributo en su lugar)

4) si usa etiquetas de elementos personalizados, debe seguir estos pasos para hacer feliz a IE 8 y versiones anteriores

<!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
fuente
4

Trampa:

  1. Usar su propio elemento html como <my-directive></my-directive>no funcionará en IE8 sin una solución alternativa ( https://docs.angularjs.org/guide/ie )
  2. El uso de sus propios elementos html hará que la validación html falle.
  3. Las directivas con un parámetro igual se pueden hacer así:

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

En lugar de esto:

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

Nosotros no uso de elementos HTML personalizada, ya que si este 2 hechos.

Cada directiva de un marco de terceros se puede escribir de dos maneras:

<my-directive></my-directive>

o

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

hace lo mismo.

Konstantin Krass
fuente
1
si desea crear una directiva con un parámetro de alcance igual, es más fácil hacerlo con A. Porque no tiene que crear un atributo adicional.
Konstantin Krass
¿A qué te refieres con adicional? Ambas alternativas tienen exactamente un atributo.
un mejor oliver
3

2 problemas con los elementos:

  1. Mala compatibilidad con navegadores antiguos.
  2. SEO: al motor de Google no le gustan.

Utilice atributos.

Amir Popovich
fuente
¿Las directivas como elementos pueden causar problemas de SEO? Estoy sorprendido. ¿Y el replaceatributo a true?
chalasr
1
Estas afirmaciones necesitan referencias. El punto 1 está bastante bien establecido en otros lugares, pero me encantaría ver fuentes sobre el punto 2.
rinogo