Las directivas de Angular: Introducción y cómo usarlas

AngularJS

Las directivas de Angular

Las directivas de Angular son básicamente funciones que son invocadas cuando el DOM (Document Object Model) es compilado por el framework de Angular. Se podría decir que las directivas están ligadas a sus correspondientes elementos del DOM cuando el documento es cargado.  La finalidad de una directiva es modificar o crear un comportamiento totalmente nuevo.

Maneras de encontrar una directiva

Si has seguido otros de mis posts, habrás visto que la forma de encontrar una directiva es como un atributo de un elemento, de hecho, es la forma de declaración más habitual.

XHTML
1
<div ng-controller="miCntrolador"></div>

Otra forma similar a la del atributo pero, con el prefijo data. Esta forma usa un estándar de creación de atributos personalizados.

XHTML
1
<div data:ng-controller="miCntrolador"></div>

Luego podemos encontrar las directivas como elementos

XHTML
1
<mi-directiva></mi-directiva>

Como una clase

XHTML
1
<span class="mi-directiva: expresion;"></span>

E incluso como un comentario

XHTML
1
<!-- directive: mi-directiva expresion -->

Sin embargo, estas 2 últimas opciones no se usan demasiado ya que están más pensadas para navegadores viejos y no es común verlos.

Usando directivas

Las directivas de Angular normalmente necesitan comunicarse e interactuar con el resto de la aplicación. Para ello se emplea el $scope que ya habrás visto en otros posts. Para ver en profundidad cómo funciona, vamos a crear un ejemplo.

El ejemplo en el que me voy a basar será en un arco iris. Cuando un usuario clique en el botón se mostrará el arcoiris y si le vuelve a dar se ocultará. Este sería el documento que contiene todo el HTML, CSS y las respectivas directivas declaradas.

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html >
<html ng-app="miModulo">
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="angular.min.js"></script>
    <script src="modulo.js"></script>
<style>
   div{
margin: 20px;
padding: 20px;
font-size: 16px;
color:#ffffff;
    }
#violeta{background-color:#9400D3;}
#indigo{background-color:#4B0082;}
#azul{background-color:#0000FF;}
#verde{background-color:#00FF00;}
#amarillo{background-color:#FFFF00;}
#naranja{background-color:#FF7F00;}
#rojo{background-color:#FF0000;}
</style>
</head>
<body ng-controller="miControlador">
    <h2>Arcoiris AngularJS</h2>
    
    <p>Haz que pare de llover para ver el arcoiris</p>
    
    <button ng-click="mostarArcoiris()" type="button">
        {{oculto ? 'Dejar de llover' : 'Que llueva'}}
    </button>
    
    <div id="rojo" ng-hide="oculto"></div>
    <div id="naranja" ng-hide="oculto"></div>
    <div id="amarillo" ng-hide="oculto"></div>
    <div id="verde" ng-hide="oculto"></div>
    <div id="azul" ng-hide="oculto"></div>
    <div id="indigo" ng-hide="oculto"></div>
    <div id="violeta" ng-hide="oculto"></div>
</body>
</html>

Si no sabes que son las directivas de Angular como ng-app o ng-controller, te recomiendo mirar este post sobre módulos. Al margen de esas directivas, destacar ng-click, que invocará la función que mostrará el arcoiris cuando se clique en el botón.

XHTML
1
2
3
    <button ng-click="mostarArcoiris()" type="button">
        {{oculto ? 'Dejar de llover' : 'Que llueva'}}
    </button>

El texto del botón tiene un condicional ternario. El texto del botón varia en función del valor de la variable oculto. Si está true, se pondrá como texto «deja de llover» en caso de false  tendrá «que llueva».

Otra directiva a tener en cuenta es ng-hide que funciona con un valor booleano y según su valor, se ocultará el elemento o no. Vemos que como valor tiene «oculto«, este será una variable que está en el módulo y sólo podrá tener un valor, true o false.

XHTML
1
<div id="rojo" ng-hide="oculto"></div>

Creando el módulo

Aquí es donde entra Angular en acción. Este código estará en modulo.js, que ya hemos invocado en el HTML anterior. Vamos a crear un módulo «miModulo» y un controlador «miControlador».

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Creacion del modulo
angular.module('miModulo', []);
 
//Configurar el modulo con un controlador
angular.module('miModulo').controller('miControlador', function($scope) {
//Ocultamos los colores por defecto
$scope.oculto = true;
//Creamos una funcion dentro del objeto scope y será invocado cuando cliquemos el boton
//La función lo que hacer es invertir el valor de la variable oculto
$scope.mostarArcoiris = function () {
$scope.oculto = !$scope.oculto;
}
});

El objeto $scope tiene un valor importante, ya que actúa de puente entre el controlador y la vista. Básicamente, todo lo que esté dentro de $scope, se podrá invocar en la vista siempre que este dentro de los pares de corchetes.

En el controlador ya ponernos que la variable oculto sea true, de esa forma ng-hide tendrá un valor true, es decir, el elemento se oculta. A continuación, está la función que invocamos en el botón que lo único que hacer es invertir el valor de la variable oculto.

Como puedes ver, con poco código ha salido una aplicación decente.

directivas de Angular resultado

Resultado final

Y hasta aquí las directivas de angular, espero que os haya gustado. A seguir picando 🙂