javascript - crear - directivas personalizadas angular 5
Directiva AngularJS Restringir A vs E (7)
Estoy trabajando en un equipo pequeño, construyendo en AngularJS e intentando mantener algunos estándares básicos y mejores prácticas; especialmente dado que somos relativamente nuevos con Angular.
Mi pregunta es con respecto a las Directivas. Más exactamente, las opciones de restrict .
Algunos de nosotros estamos usando restrict: ''E'' tiene así <my-directive></my-directive> en el html.
Otros usan restrict: ''A'' y tienen <div my-directive></div> en el html.
Entonces, por supuesto, puede usar restrict: ''EA'' y usar cualquiera de los anteriores.
Por el momento no es gran cosa, aunque cuando este proyecto sea tan grande como sea posible, me gustaría que cualquiera que lo vea entienda fácilmente lo que está pasando.
¿Hay pros / contras para la forma de atributo o elemento de hacer las cosas?
¿Hay algún problema que debamos saber si elegimos decir elemento sobre atributo?
2 problemas con los elementos:
- Mala compatibilidad con navegadores antiguos.
- SEO: al motor de Google no le gustan.
Use atributos.
De acuerdo con la documentación :
¿Cuándo debería usar un atributo versus un elemento? Use un elemento cuando esté creando 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. Use un atributo cuando esté decorando un elemento existente con nueva funcionalidad.
Edite el siguiente comentario sobre trampas para obtener una respuesta completa:
Suponiendo que está compilando una aplicación que debe ejecutarse en Internet Explorer <= 8, a quien el equipo AngularJS ha eliminado el soporte desde AngularJS 1.3, debe seguir las siguientes instrucciones para que funcione: https://docs.angularjs.org/guide/ie
Element no es compatible con IE8, debe realizar un trabajo para que IE8 acepte etiquetas personalizadas.
Una ventaja de usar un atributo sobre un elemento es que puede aplicar múltiples 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 ajustar el elemento en un grupo de etiquetas.
La opción restringir normalmente 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 .
Trampa:
- Usar su propio elemento html como
<my-directive></my-directive>no funcionará en IE8 sin solución alternativa ( https://docs.angularjs.org/guide/ie ) - El uso de sus propios elementos html hará que la validación html falle.
- 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>
No usamos elementos html personalizados, porque si esto es 2 hechos.
Cada directiva por marco de terceros se puede escribir de dos maneras:
<my-directive></my-directive>
o
<div data-my-directive></div>
hace lo mismo
Una de las trampas que conozco es el problema de IE con elementos personalizados. Según lo citado de los https://docs.angularjs.org/guide/ie :
3) no utiliza etiquetas de elemento personalizadas como (use la versión de atributo en su lugar)
4) si usa etiquetas personalizadas de elementos, entonces debe seguir estos pasos para que IE 8 y las siguientes sean felices
<!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>
restringir es para definir el tipo de directiva, y puede ser A (Atributo), C (Clase), E (Elemento) y M (coMmento), 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 -->