Directivas de AngularJS
- Página anterior Módulos de AngularJS
- Página siguiente Modelos de AngularJS
AngularJS le permite usar lo que se llama “directivanueva propiedad para expandir HTML.
AngularJS tiene un conjunto de directivas integradas que pueden proporcionar funcionalidades a su aplicación.
AngularJS también te permite definir tus propias instrucciones.
Directivas de AngularJS
Las instrucciones de AngularJS son atributos extendidos de HTML con prefijo ng-
.
al cargar la página web,
La instrucción inicializa la aplicación de AngularJS.
instrucción ng-init
La instrucción inicializa los datos de la aplicación.
ng-model
las instrucciones vinculan el valor de los controles HTML (input, select, textarea) a los datos de la aplicación.
Lee más sobre todas las instrucciones de AngularJS en nuestra referencia de instrucciones de AngularJS.
instancia
<div ng-app="" ng-init="firstName='Bill'"> <p>Nombre: <input type="text" ng-model="firstName"></p> <p>Escribiste: {{ firstName }}</p> </ul>
al cargar la página web,
la instrucción también le dice a AngularJS que el elemento <div> es el 'propietario' de la aplicación.
vinculación de datos
En el ejemplo anterior, {{ firstName }}
Una expresión es una expresión de vinculación de datos de AngularJS.
La vinculación de datos de AngularJS enlaza expresiones de AngularJS con datos de AngularJS.
{{ firstName }}
con ng-model="firstName"
unidos.
En el siguiente ejemplo, dos campos de texto se unen mediante dos instrucciones ng-model:
instancia
<div ng-app="" ng-init="quantity=1;price=5"> Cantidad: <input type="number" ng-model="quantity"> Costos: <input type="number" ng-model="price"> Total en dólares: {{ quantity * price }} </ul>
Usar instrucción ng-init
no es común. Aprenderás cómo inicializar datos en el capítulo sobre controladores.
repetir elementos HTML
ng-repeat
Instrucción de repetición de elementos HTML:
instancia
<div ng-app="" ng-init="names=['Jani','Hege','Kai']"> {name:'Kai',country:'Denmark'}] <ul> {{ x }} {{ x.name + ', ' + x.country }} </li> </ul>
ng-repeat
la instrucción realmente itera sobre cada elementoclona un elemento HTML una vez.
para arrays de objetos ng-repeat
Instrucción:
instancia
<div ng-app="" ng-init="names=[ {name:'Jani',country:'Norway'}, {name:'Hege',country:'Sweden'}, {name:'Kai',country:'Denmark'}]"> {name:'Kai',country:'Denmark'}] <ul> <li ng-repeat="x in names"> {{ x.name + ', ' + x.country }} </li> </ul>
</div>
AngularJS es muy adecuado para aplicaciones CRUD (crear, leer, actualizar, eliminar) de base de datos.
imagine que estos objetos son registros de una base de datos.
al cargar la página web,
la instrucción ng-init defineinstrucción ng-app.
elemento raízal cargar la página web,
ng-appla instrucciónencuesta automática
la aplicación (inicialización automática).
instrucción ng-init
la instrucción ng-init definevalor inicial.
Normalmente, no utiliza ng-init. Usará el controlador o el módulo.
más tarde aprenderá más sobre los controladores y módulos.
instrucción ng-model
ng-model
las instrucciones vinculan el valor de los controles HTML (input, select, textarea) a los datos de la aplicación.
ng-model
las instrucciones también pueden:
- proporcionar validación de tipo de datos de la aplicación (número, correo electrónico, obligatorio)
- proporcionar estado de datos de la aplicación (no válido, sucio, tocado, error)
- proporcionar clases CSS para elementos HTML
- vincular elementos HTML a formularios HTML
leer más sobre ng-model
información de la instrucción.
Crear nueva instrucción
Además de todas las instrucciones integradas de AngularJS, también puede crear sus propias instrucciones.
la nueva instrucción se crea utilizando .directive
creada por la función.
para llamar a la nueva instrucción, cree un elemento HTML con el mismo nombre de etiqueta que la nueva instrucción.
al nombrar las instrucciones, debe usar nombres en mayúsculas y minúsculas juntas,w3TestDirective
, pero debe usar el nombre separado por guiones para llamarlo,w3-test-directive
:
instancia
<body ng-app="myApp"> <w3-test-directive></w3-test-directive> <script> var app = angular.module("myApp", []); app.directive("w3TestDirective", function() { return { template : "<h1>¡Hecho por una directiva!</h1>" }); }); </script> </body>
puede llamar a la instrucción de la siguiente manera:
- nombre de elemento
- propiedad
- clase
- comentario
los siguientes ejemplos producirán el mismo resultado:
nombre de elemento
<w3-test-directive></w3-test-directive>
propiedad
<div w3-test-directive></div>
clase
<div class="w3-test-directive"></div>
comentario
<!-- directive: w3-test-directive -->
Limitar
Puedes limitar tu instrucción para que solo se pueda invocar a través de ciertos métodos.
instancia
Agregando un valor de "A"
del restrict
Atributo, la instrucción solo se puede invocar a través de atributos:
var app = angular.module("myApp", []); app.directive("w3TestDirective", function() { return { restrict : "A", template : "<h1>¡Hecho por una directiva!</h1>" }); });
Los valores legales de restrict son:
E
Representa nombres de elementosA
Representa atributosC
Representa clasesM
Representa comentarios
Por defecto, este valor es EA
, lo que significa que tanto los nombres de los elementos como los nombres de los atributos pueden invocar instrucciones.
- Página anterior Módulos de AngularJS
- Página siguiente Modelos de AngularJS