Nombre de la directiva angular: ¿solo se permiten letras minúsculas?

76

Mi código:

app.directive('abcabc', function (){ alert('directive');}); // working

pero

app.directive('abcAbc', function (){ alert('directive');}); // not working !
app.directive('abc-abc', function (){ alert('directive');}); // not working !

Estoy haciendo mal ¿O hay reglas de nomenclatura especiales para la directiva Angular?

Zach
fuente

Respuestas:

118

¡AngularJS intenta hacer felices a todos!

Algunas personas prefieren usar atributos de datos, como data-abc-abc, supongo, para mantener contentos a los validadores. Otras personas prefieren usar espacios de nombres como abc:abc, y otras prefieren usar el nombre de la directiva real abcAbc. O incluso todo en mayúsculas ABC_ABC. O atributos de extensión como x-abc-abc.

AngularJS normaliza el nombre utilizado en HTML para intentar cubrir todos estos casos. data-y x-son despojados, con el resto CamelCased :, -y _como límites de las palabras. Esto se hace a abcAbcpartir de los casos mencionados anteriormente, que se utiliza para buscar la directiva declarada en JavaScript.

Todo esto se llama normalización de atributos (EE. UU.: Normalización de atributos) y se puede encontrar en la documentación y el código fuente de AngularJS .

Steve Klösters
fuente
6
¡Gracias por esto! Leí la documentación como "puedes hacerlo de cualquier manera" pero claramente ese no es el caso. Me sorprende que esto solo tenga 10 votos a favor hasta ahora.
spikeheap
También está en línea con el espacio de nombres de componentes web: webcomponents.github.io/articles/web-components-best-practices
Rui Nunes
2
Cambié el último párrafo para usar la forma en inglés de EE. UU. De la palabra "normalización" en lugar de "normalización" británica, ya que los documentos angulares usan la ortografía en inglés y la búsqueda de la ortografía británica no arroja ningún resultado.
Samuel Neff
1
la peor sorpresa llega cuando se da cuenta de que debe comenzar el nombre de la directiva con letras pequeñas, no en mayúscula.
sábado
1
@sazary ¿Por qué es esto una sorpresa? Su carcasa se alinea con todos los demás identificadores de JavaScript en Angular.
MEMark
25

Debe usar nombres separados por guiones dentro del html y camelCase para el nombre correspondiente en la directiva.

Como puede leer en el documento: Angular usa nombre con guiones para los nombres de los atributos y camelCase para el nombre de la directiva correspondiente)

Aquí: http://docs.angularjs.org/tutorial/step_00

AlwaysALearner
fuente
6
puede ser la forma recomendada. pero odio esto, ya que buscar la directiva correspondiente en todos los archivos se hace más tedioso. especialmente para directivas con muchas palabras.
ColacX
0

Bueno, el nombre de la directiva debe estar en minúsculas, al menos en la versión 1.4.9 de AngularJS, de lo contrario, obtengo un error de $ inject no se puede encontrar

Robar
fuente