Directivas de AngularJS
AngularJS le permite extender HTML con nuevos atributos llamados Directivas .
AngularJS tiene un conjunto de directivas integradas que ofrecen funcionalidad a sus aplicaciones.
AngularJS también te permite definir tus propias directivas.
Directivas de AngularJS
Las directivas de AngularJS son atributos HTML extendidos con el prefijo ng-.
La ng-appdirectiva inicializa una aplicación AngularJS.
La ng-initdirectiva inicializa los datos de la aplicación.
La ng-modeldirectiva vincula el valor de los controles HTML (entrada, selección, área de texto) a los datos de la aplicación.
Lea sobre todas las directivas de AngularJS en nuestra referencia de directivas de AngularJS .
Ejemplo
<div ng-app="" ng-init="firstName='John'">
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>
La ng-appdirectiva también le dice a AngularJS que el elemento <div> es el "propietario" de la aplicación AngularJS.
El enlace de datos
La {{ firstName }}expresión, en el ejemplo anterior, es una expresión de enlace de datos de AngularJS.
El enlace de datos en AngularJS une las expresiones de AngularJS con los datos de AngularJS.
{{ firstName }}está ligado con ng-model="firstName".
En el siguiente ejemplo, dos campos de texto están vinculados con dos directivas ng-model:
Ejemplo
<div ng-app="" ng-init="quantity=1;price=5">
Quantity: <input type="number" ng-model="quantity">
Costs: <input type="number" ng-model="price">
Total in dollar: {{ quantity * price }}
</div>
El uso ng-initno es muy común. Aprenderá cómo inicializar datos en el capítulo sobre controladores.
Repetición de elementos HTML
La ng-repeatdirectiva repite un elemento HTML:
Ejemplo
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
La ng-repeatdirectiva en realidad clona elementos HTML
una vez para cada elemento de una colección.
La ng-repeatdirectiva utilizada en una matriz de objetos:
Ejemplo
<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
AngularJS es perfecto para las aplicaciones de base de datos CRUD (Crear Leer Actualizar Eliminar).
Imagínese si estos objetos fueran registros de una base de datos.
La directiva en la aplicación
La ng-appdirectiva define el elemento raíz de una aplicación AngularJS.
La ng-appdirectiva arrancará automáticamente (inicializará automáticamente) la aplicación cuando se cargue una página web.
La Directiva de Calor
La ng-initdirectiva define valores iniciales para una aplicación AngularJS.
Normalmente, no usará ng-init. En su lugar, utilizará un controlador o módulo.
Aprenderá más sobre controladores y módulos más adelante.
La Directiva de modelado
La ng-modeldirectiva vincula el valor de los controles HTML (entrada, selección, área de texto) a los datos de la aplicación.
La ng-modeldirectiva también puede:
- Proporcione validación de tipo para los datos de la aplicación (número, correo electrónico, requerido).
- Proporcione el estado de los datos de la aplicación (no válido, sucio, tocado, error).
- Proporcione clases CSS para elementos HTML.
- Enlace elementos HTML a formularios HTML.
Lea más sobre la ng-modeldirectiva en el próximo capítulo.
Crear nuevas directivas
Además de todas las directivas AngularJS integradas, puede crear sus propias directivas.
Las nuevas directivas se crean utilizando la .directivefunción.
Para invocar la nueva directiva, cree un elemento HTML con el mismo nombre de etiqueta que la nueva directiva.
Al nombrar una directiva, debe usar un nombre de caso de camello
w3TestDirective, pero al invocarla, debe usar -un nombre separado w3-test-directive:
Ejemplo
<body ng-app="myApp">
<w3-test-directive></w3-test-directive>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective",
function() {
return {
template : "<h1>Made by a directive!</h1>"
};
});
</script>
</body>
Puede invocar una directiva usando:
- Nombre del elemento
- Atributo
- Clase
- Comentario
Todos los ejemplos a continuación producirán el mismo resultado:
Nombre del elemento
<w3-test-directive></w3-test-directive>
Atributo
<div w3-test-directive></div>
Clase
<div class="w3-test-directive"></div>
Comentario
<!-- directive: w3-test-directive -->
Restricciones
Puede restringir sus directivas para que solo sean invocadas por algunos de los métodos.
Ejemplo
Al agregar una restrictpropiedad con el valor "A", la directiva solo puede ser invocada por atributos:
var app = angular.module("myApp", []);
app.directive("w3TestDirective",
function() {
return {
restrict : "A",
template : "<h1>Made by a directive!</h1>"
};
});
Los valores de restricción legal son:
Epara el nombre del elementoApara atributoCpara claseMpara comentarios
De forma predeterminada, el valor es EA, lo que significa que tanto los nombres de los elementos como los de los atributos pueden invocar la directiva.