Prevenir click de ui-sref en AngularJS

0

En este artículo vamos a hablar sobre AngularJS. En específico, vamos a ver el uso de directivas personalizadas y la aplicación de la directiva ui-sref la cual es muy utilizada en conjunto con las etiquetas <a> HTML para generar enlaces.

Usualmente cuando utilizamos ui-sref no pensamos en deshabilitar el click al elemento pues justamente ui-sref nos sirve para indicar la creación  de un enlace a partir de un estado de las rutas. No obstante, existen casos en que queremos deshabilitar esta redirección en caso se cumpla cierta condición. Si es que han estado en una situación similar y han probado deshabilitando ui-sref de alguna forma, se podrán haber dado cuenta de que esto no es posible pues ui-sref ignora por completo cualquier intento de deshabilitarlo.

Por ejemplo, supongamos que tenemos lo siguiente:

Es decir, estamos generando un enlace al detalle de los contactos mediante ui-sref y la función contacts.detail. ¿Pero que pasa si intentamos deshabilitar aquél enlace? Por ejemplo, podríamos intentar vinculando el evento “click” a una función vacía para así evitar que se ejecute ui-sref. Sin embargo, nos vamos a dar cuenta de que no funciona:

Esto no funcionará.

Podríamos probar de la siguiente forma también, dando como valor resultante false al llamado de ui-sref:

Sin embargo, tampoco funcionará.

¿Entonces, cómo podemos prevenir el click en ui-sref con AngularJS de manera condicional? La respuesta está en el uso de directivas personalizadas. Lo que haremos, es declarar nuestra propia directiva encargada de “comer” el click en cualquier elemento, de tal manera que si el elemento tiene aquella directiva, ningún click funcionará sobre la misma.

La directiva que vamos a declarar es la siguiente:

El autor de dicha directiva es rnd y se puede encontrar originalmente en el siguiente enlace: Click acá

Una vez que insertemos dicha directiva, podemos hacer uso de la misma de la siguiente forma:

Con esto, “comeremos” el click realizado en la etiqueta <a> HTML si es que la condición pasada como parámetro es “true” como resultado y así evitaremos que se ejecute ui-sref por completo.

Comparte este post.
Artículos Recomendados Para Tí:
>