AngularJS Directivas

AngularJS, mediante las llamadasdirectivas, extiende HTMLcon nuevos atributos.

AngularJS agrega funcionalidades a las aplicaciones mediante directivas integradas.

AngularJS te permite crear directivas personalizadas.

Directivas de AngularJS

Las directivas AngularJS son atributos HTML ampliados, con un prefijong-。

ng-appLa directiva inicializa una aplicación AngularJS.

ng-initLa directiva inicializa los datos de la aplicación.

ng-modelLa directiva vincula los valores del elemento (por ejemplo, el valor de un campo de entrada) a la aplicación.

El contenido completo de las directivas se puede consultar en elManual de referencia de AngularJS。

Ejemplo de AngularJS

<div ng-app="" ng-init="firstName='John'"> <p>Intenta escribir en el campo de entrada:</p> <p>Nombre:<input type="text" ng-model="firstName"></p> <p>Lo que has escrito es: {{ firstName }}</p> </div>

Pruébalo »

ng-appLa directiva le dice a AngularJS que el elemento <div> es el 'propietario' de laaplicaciónAngularJS.

Enlace de datos

En el ejemplo anterior,{{ firstName }}la expresión es una expresión de enlace de datos de AngularJS.

El enlace de datos en AngularJS sincroniza las expresiones AngularJS con los datos de AngularJS.

{{ firstName }}se realiza medianteng-model="firstName"la sincronización.

En el siguiente ejemplo, dos campos de texto se sincronizan mediante dos directivas ng-model:

Ejemplo de AngularJS

<div ng-app="" ng-init="quantity=1;price=5"> <h2>Calculadora de precios</h2>Cantidad:<input type="number" ng-model="quantity">Precio:<input type="number" ng-model="price"> <p><b>Precio total:</b> {{ quantity * price }}</p> </div>

Pruébalo »

Note El uso deng-initno es muy común. Aprenderá una mejor forma de inicializar datos en el capítulo de controladores.

Repetir elementos HTML

ng-repeatLa directiva repite un elemento HTML:

Ejemplo de AngularJS

<div ng-app="" ng-init="names=['Jani','Hege','Kai']"> <p>Usar ng-repeat para recorrer un array</p> <ul> <li ng-repeat="x in names"> {{ x }} </li> </ul> </div>

Pruébalo »

ng-repeatLa directiva se usa en un array de objetos:

Ejemplo de AngularJS

<div ng-app="" ng-init="names=[ {name:'Jani',country:'Norway'}, {name:'Hege',country:'Sweden'}, {name:'Kai',country:'Denmark'}]"> <p>Recorrer objetos:</p> <ul> <li ng-repeat="x in names"> {{ x.name + ', ' + x.country }} </li> </ul> </div>

Pruébalo »

Note AngularJS es perfecto para aplicaciones CRUD (Create, Read, Update, Delete) de bases de datos.
Imagina los objetos del ejemplo como registros de una base de datos.

Directiva ng-app

ng-appLa directiva define elelemento raíz。

ng-appLa directiva, cuando la página Web termina de cargarse,arranca automáticamente(inicializa automáticamente) la aplicación.

Más adelante aprenderáng-appcómo conectarse a un módulo de código mediante un valor (por ejemplo, ng-app="myModule").

Directiva ng-init

ng-initLa directiva define elvalor inicial。

Normalmente, no se usa ng-init. En su lugar, se utiliza un controlador o un módulo.

Más adelante aprenderá más sobre controladores y módulos.

Directiva ng-model

ng-modelLa directivavincula elementos HTMLa los datos de la aplicación.

ng-modelLa directiva también puede:

  • Proporcionar validación de tipos para los datos de la aplicación (number, email, required).
  • Proporcionar estado para los datos de la aplicación (invalid, dirty, touched, error).
  • Proporcionar clases CSS para elementos HTML.
  • Vincular elementos HTML a formularios HTML.

Directiva ng-repeat

ng-repeatLa directiva, para cada elemento de la colección (array),clona una vez el elemento HTML。


Crear directivas personalizadas

Además de las directivas integradas en AngularJS, también podemos crear directivas personalizadas.

Puedes usar la.directivefunción .directive para agregar directivas personalizadas.

Para llamar a una directiva personalizada, se debe añadir el nombre de la directiva personalizada en el elemento HTML.

Use el método camelCase para nombrar una directiva, ejemploDirectivepero al usarla, hay que separarla con-un guion.ejemplo-directive:

Ejemplo de AngularJS

<body ng-app="myApp">

<ejemplo-directive></ejemplo-directive>

<script>
var app = angular.module("myApp", []);
app.directive("ejemploDirective", function() {
    return {
template : "<h1>¡Directiva personalizada!</h1>"
    };
});
</script>

</body>

Pruébalo »

Puedes llamar a la directiva de las siguientes maneras:

  • Nombre de elemento
  • Atributo
  • Nombre de clase
  • Comentario

Los siguientes ejemplos también producen el mismo resultado:

Nombre de elemento

<ejemplo-directive></ejemplo-directive>

Pruébalo »

Atributo

<div ejemplo-directive></div>

Pruébalo »

Nombre de clase

<div class="ejemplo-directive"></div>

Pruébalo »

Comentario

<!-- directive: ejemplo-directive -->

Pruébalo »

Restricciones de uso

Puedes restringir tu directiva para que solo se llame de ciertas maneras.

Ejemplo

Al agregarrestrictel atributo restrict, y estableciendo el valor en"A"'A', para configurar la directiva de modo que solo se pueda invocar como atributo:

var app = angular.module("myApp", []);
app.directive("ejemploDirective", function() {
    return {
        restrict : "A",
        template : "<h1>¡Directiva personalizada!</h1>"
    };
});

Pruébalo »

restrictEl valor puede ser uno de los siguientes:

  • EUsar como nombre de elemento
  • AUsar como atributo
  • CUsar como nombre de clase
  • MUsar como comentario

restrictEl valor predeterminado esEA, es decir, la directiva se puede invocar por nombre de elemento y nombre de atributo.

Otras extensiones