Ver contenido
carlosazaustre.es carlosazaustre.es

Cómo pasar variables como atributos en directivas de AngularJS

🗓 | 💻 Desarrollo | 🕐 2 minutos de lectura | 💬 Comments

Las directivas de Angular sirven para encapsular código HTML de manera que nuestras aplicaciones puedan tener elementos reutilizables, también conocidos como componentes.

Cuando Angular apareció fue algo muy novedoso, aunque hoy en día podemos utilizar los Web Components y la librería Polymer para tener algo parecido y de forma nativa de HTML5.

Una de las cosas que suele ser algo complicada de implementar es cuando en nuestra directiva colocamos un atributo y queremos que ese atributo se utilice en el HTML interior de la directiva, y además que ese atributo que pasamos sea una variable dinámica que cambiará según la vista o estado en el que nos encontremos.

En este artículo vamos a ver como hacerlo con un pequeño ejemplo.

Imaginemos que queremos implementar una directiva que sea una caja de búsqueda. Y lo queremos programar como directiva porque lo vamos a usar en más partes de nuestra aplicación y ese es su objetivo, que las directivas sean reutilizables. Queremos que sea algo así:

Esta directiva tendrá el siguiente código HTML por debajo:

¿Cómo hacemos para pasar el contenido del atributo busqueda al atributo value del input dentro de nuestra directiva? Veamos el código JavaScript de la directiva, suponiendo que pertenezca a un módulo myApp.

Veamos que hemos hecho aquí. Hemos pasado el contenido de la directiva como un string al atributo template. Si el HTML es muy grande, podemos tenerlo separado en un archivo HTML y pasarle la ruta de ese archivo en el atributo templateUrl

En la plantilla hemos indicado que el value del input sea value={{busqueda}}. Es decir, le pasamos como variable el contenido del atributo busqueda de la directiva.

Para poder hacer esto, y tambien, si el contenido que pasamos no es fijo, si no que viene de una variable, tipo:

necesitamos indicarle a la directiva que tiene un scope propio y cuales son los atributos de ese scope:

Indicándole @ le estamos diciendo de manera unidireccional que el valor del atributo busqueda se copie e la propiedad {{busqueda}} del scope de la directiva.

Usar @ tiene un problema, al ser unidireccional, si queremos cambiar el valor de la propiedad busqueda del scope de la directiva, no se cambia la propiedad en el controlador que estemos utilizando, y nos obloga a usar siempre la doble llave {{ }} si queremos enlazar la propiedad al controlador.

Para solucionar esto, podemos usar el caracter = que indica que la propiedad busqueda del scope de la directiva sea exactamente la propiedad del scope del controlador que estemos utilizando y tenga un atributo búsqueda.

Con estos cambios quedaría así la definición:

y podríamos usar la directiva así:

Siendo textoBusqueda una propiedad del scope donde se llama a la directiva.

✎ ¿Ves alguna errata? ¿Quieres modificar algo? Haz una Pull Request.

Carlos Azaustre

Soy Carlos Azaustre. Desarrollador web desde hace más de 8 años. He trabajado en Google, IBM y Eventbrite. Soy GDE (Google Developer Expert) en Tecnologías Web. Desde 2013 intento documentar en éste blog todo lo que aprendo y así compartirlo con el resto de la comunidad.

📬 Únete y ponte al día en desarrollo web

Recibe puntualmente información sobre las últimas novedades en tecnologías web y desarrollo web moderno para que estés siempre actualizadx:

🔒 Libre de Spam. Sólo contenido que te interesa..