AngularJS le permite extender HTML con nuevos atributos llamados directivas.
AngularJS tiene un conjunto de directivas incorporadas que ofrece funcionalidad a sus aplicaciones.
AngularJS también le permite definir sus propias directivas.
AngularJS Directivas
AngularJS directivas están extendidos atributos HTML con el prefijo ng- .
El ng-app Directiva inicializa una aplicación AngularJS.
El ng-init Directiva inicializa los datos de aplicación.
El ng-model directiva se une el valor de los controles HTML (input, select, textarea) para datos de aplicación.
Lee sobre todas las directivas AngularJS en nuestros AngularJS referencia Directiva .
Ejemplo
<div ng-app="" ng-init="firstName='John'">
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>
Inténtalo tú mismo " El ng-app directiva también dice AngularJS que el elemento <div> es el "dueño" de la aplicación AngularJS.
El enlace de datos
El {{ firstName }} expresión, en el ejemplo anterior, es un AngularJS expresión de enlace de datos.
vinculantes en AngularJS de datos se une AngularJS expresiones con los datos AngularJS.
{{ firstName }} está enlazado con ng-model="firstName" .
En el siguiente ejemplo, dos campos de texto están unidos entre sí con dos directivas ng-modelo:
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> Inténtalo tú mismo "  | Usando ng-init no es muy común. Usted aprenderá cómo inicializar los datos en el capítulo sobre los controladores. |
|---|
La repetición de elementos HTML
El ng-repeat Directiva 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>
Inténtalo tú mismo " El ng-repeat Directiva realidad clona elementos HTML una vez para cada elemento de una colección.
El ng-repeat directiva usada en una serie 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>
Inténtalo tú mismo " | AngularJS es perfecto para CRUD base de datos (Crear Leer Actualizar Borrar) aplicaciones. Imagínese si estos objetos eran registros de una base de datos. |
|---|
La Directiva ng-app
El ng-app directiva define el elemento raíz de una solicitud AngularJS.
El ng-app directiva de auto-arranque (inicializar automáticamente) la aplicación cuando se carga una página web.
La Directiva ng-init
El ng-init Directiva define los valores iniciales para una aplicación AngularJS.
Normalmente, no usará ng-init. Que va a utilizar un controlador o módulo en su lugar.
Va a aprender más acerca de los controladores y los módulos más tarde.
La Directiva ng-modelo
El ng-model directiva se une el valor de los controles HTML (input, select, textarea) para datos de aplicación.
El ng-model directiva también puede:
- Proporcionar validación de tipo de datos de la aplicación (número, correo electrónico, es necesario).
- Proporcionar el estado de los datos de aplicación (no válido, sucio, tocado, error).
- Proporcionar clases CSS para elementos HTML.
- elementos HTML se unen a los formularios HTML.
Lea más sobre el ng-model directiva en el siguiente capítulo.
Crear nuevas directivas
Además de todas las directivas AngularJS incorporados, puede crear sus propias directivas.
Nuevas directivas se crean mediante la .directive función.
Para invocar la nueva directiva, hacer que un elemento HTML con el mismo nombre de la etiqueta como la nueva directiva.
Al escribir el nombre de una Directiva, debe utilizar un nombre del caso de camellos, w3TestDirective , pero cuando la invoca, debe utilizar - 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>
Inténtalo tú mismo " Puede invocar una directiva mediante el uso de:
- nombre del elemento
- Atributo
- Clase
- Comentario
Los ejemplos siguientes serán todos producir el mismo resultado:
restricciones
Le permite restringir las directivas que sólo se invocada por algunos de los métodos.
Ejemplo
Mediante la adición de un restrict propiedad con el valor "A" , la directiva sólo puede ser invocada por atributos:
var app = angular.module("myApp", []);
app.directive("w3TestDirective",
function() {
return {
restrict : "A",
template : "<h1>Made by a directive!</h1>"
};
});
Inténtalo tú mismo " Los restringir los valores legales son:
-
Epara el nombre del elemento -
Ade Atributo -
Cpara la Clase -
Mpara Comentario
Por defecto, el valor es EA , lo que significa que los dos nombres de elementos y atributos nombres pueden invocar la directiva.