Tag Archives: Componente

Componente AngularJS – Ejecutando callback al dejar de actuar en un elemento

AngularJS, Javascript

Lo que quiero compartir hoy, es una pequeña directiva que actúa como componente, para el control de una acción, después de actuar en un elemento.

En un ejemplo práctico, la idea sería de tener el mismo control que con el evento “onblur” que podemos disponer en un input cualquiera, pero en este caso, se me dio la necesidad de tener el comportamiento “onblur” en un elemento cualquiera.

Por ejemplo, imaginemos que tenemos un texto en un DIV, y queremos que al hacer click en ese texto, se convierta en un select (en este caso un dropdown de bootstrap). Ahora, tenemos 2 posibles acciones: Hacer click en el Dropdown, desplegar opciones y elegir una o cancelar la operación y que todo vuelva al estado por defecto y aparezca el texto inicial. Pues este segundo caso, no sabía como controlar el ejecutar un método, al hacer click fuera del elemento el cual quería resetear. Después de darle vueltas y no encontrar una solución a esto, decidí hacer una directiva que se encargara de ello, inspirándome en este artículo: http://vadimpopa.com/onblur-like-for-a-div-in-angularjs-to-close-a-popup/.

La idea es facil. Capturamos con un Listener de Javascript los eventos “click” de body y del elemento que contenga nuestro atributo “outClick”. Por lo que ahora podemos decir: Cuando yo hago click en el elemento donde tengo la directiva, es que estoy usando ese elemento, pero si hago click en cualquier punto de la web “body”, quiero que se resetee a su estado inicial.

A continuación os dejo un Fiddle con el ejemplo en marcha.

tags: , , , , ,