Cómo crear una directiva CUSTOM en AngularJS con un ejemplo

¿Qué es la directiva personalizada?

Una directiva personalizada en Angular Js es una directiva definida por el usuario con la funcionalidad deseada. Aunque AngularJS tiene muchas directivas poderosas listas para usar, en ocasiones se requieren directivas personalizadas.

En este tutorial, aprenderá:

• ¿Cómo crear una directiva personalizada?
• Directivas y ámbitos de AngularJs
• Usando controladores con directivas
• Cómo crear directivas reutilizables
• Directivas y componentes de AngularJS - ng-transclude
• Directivas anidadas
• Manejo de eventos en una directiva

¿Cómo crear una directiva personalizada?

Echemos un vistazo a un ejemplo de cómo podemos crear una directiva personalizada.

La directiva personalizada en nuestro caso simplemente va a inyectar una etiqueta div que tiene el texto "Tutorial de AngularJS" en nuestra página cuando se llama a la directiva.

Guru99 Global Event

Explicación del código:

1. Primero estamos creando un módulo para nuestra aplicación angular. Esto es necesario para crear una directiva personalizada porque la directiva se creará utilizando este módulo.
2. Ahora estamos creando una directiva personalizada llamada "ngGuru" y definiendo una función que tendrá un código personalizado para nuestra directiva.

Nota:-

Tenga en cuenta que al definir la directiva, la hemos definido como ngGuru con la letra 'G' como mayúscula. Y cuando accedemos a él desde nuestra etiqueta div como directiva, lo estamos accediendo como ng-guru. Así es como angular entiende las directivas personalizadas definidas en una aplicación. En primer lugar, el nombre de la directiva personalizada debe comenzar con las letras 'ng'. En segundo lugar, el símbolo de guión '-' solo debe mencionarse al llamar a la directiva. Y en tercer lugar, la primera letra que sigue a las letras 'ng' al definir la directiva puede ser minúscula o mayúscula.

3. Estamos utilizando el parámetro de plantilla, que es un parámetro definido por Angular para directivas personalizadas. En esto, estamos definiendo que siempre que se use esta directiva, simplemente use el valor de la plantilla e inyéctelo en el código de llamada.
4. Aquí ahora estamos haciendo uso de nuestra directiva "ng-guru" creada a medida. Cuando hagamos esto, el valor que definimos para nuestra plantilla "
   Tutorial de Angular JS
   " ahora se inyectará aquí.

Si el código se ejecuta correctamente, se mostrará el siguiente resultado cuando ejecute su código en el navegador.

Producción:

• El resultado anterior muestra claramente que nuestra directiva ng-guru personalizada, que tiene la plantilla definida para mostrar un texto personalizado, se muestra en el navegador.

Directivas y ámbitos de AngularJs

El alcance se define como el pegamento que une al controlador a la vista al administrar los datos entre la vista y el controlador.

Al crear directivas AngularJs personalizadas, de forma predeterminada tendrán acceso al objeto de alcance en el controlador principal.

De esta manera, resulta fácil para la directiva personalizada hacer uso de los datos que se pasan al controlador principal.

Veamos un ejemplo de cómo podemos usar el alcance de un controlador padre en nuestra directiva personalizada.

Guru99 Global Event

Explicación del código:

1. Primero creamos un controlador llamado "DemoController". En esto, definimos una variable llamada tutorialName y la adjuntamos al objeto de alcance en una declaración: $ scope.tutorialName = "AngularJS".
2. En nuestra directiva personalizada, podemos llamar a la variable "tutorialName" usando una expresión. Esta variable sería accesible porque está definida en el controlador "DemoController", que se convertiría en el padre de esta directiva.
3. Hacemos referencia al controlador en una etiqueta div, que actuará como nuestra etiqueta div principal. Tenga en cuenta que esto debe hacerse primero para que nuestra directiva personalizada acceda a la variable tutorialName.
4. Finalmente, simplemente adjuntamos nuestra directiva personalizada "ng-guru" a nuestra etiqueta div.

Si el código se ejecuta correctamente, se mostrará el siguiente resultado cuando ejecute su código en el navegador.

Producción:

• El resultado anterior muestra claramente que nuestra directiva personalizada "ng-guru" hace uso de la variable de alcance tutorialName en el controlador principal.

Usando controladores con directivas

Angular brinda la posibilidad de acceder a la variable miembro del controlador directamente desde directivas personalizadas sin la necesidad del objeto de alcance.

Esto se vuelve necesario a veces porque en una aplicación puede tener varios objetos de alcance que pertenecen a varios controladores.

Por lo tanto, existe una alta probabilidad de que pueda cometer el error de acceder al objeto de alcance del controlador incorrecto.

En tales escenarios, hay una manera de mencionar específicamente decir "Quiero acceder a este controlador específico" desde mi directiva.

Echemos un vistazo a un ejemplo de cómo podemos lograrlo.

Guru99 Global Event

Explicación del código:

1. Primero creamos un controlador llamado "DemoController". En este definiremos una variable llamada "tutorialName" y esta vez en lugar de adjuntarla al objeto de alcance, la adjuntaremos directamente al controlador.
2. En nuestra directiva personalizada, mencionamos específicamente que queremos usar el controlador "DemoController" usando la palabra clave del parámetro del controlador.
3. Creamos una referencia al controlador usando el parámetro "controllerAs". Esto está definido por Angular y es la forma de hacer referencia al controlador como referencia.

   Nota: - Es posible acceder a varios controladores en una directiva especificando los bloques respectivos del controlador, controllerAs y declaraciones de plantilla.

4. Finalmente, en nuestra plantilla, estamos usando la referencia creada en el paso 3 y usando la variable miembro que se adjuntó directamente al controlador en el Paso 1.

Si el código se ejecuta correctamente, se mostrará el siguiente resultado cuando ejecute su código en el navegador.

Producción:

El resultado muestra claramente que la directiva personalizada está accediendo especialmente al DemoController y la variable miembro tutorialName adjunta y muestra el texto "Angular".

Cómo crear directivas reutilizables

Ya vimos el poder de las directivas personalizadas, pero podemos llevarlo al siguiente nivel creando nuestras propias directivas reutilizables.

Digamos, por ejemplo, que queríamos inyectar código que siempre mostrara las siguientes etiquetas HTML en múltiples pantallas, que es básicamente una entrada para el "Nombre" y la "edad" del usuario.

Para reutilizar esta función en múltiples pantallas sin codificar cada vez, creamos un control maestro o directiva en angular para contener estos controles ("Nombre" y "edad" del usuario).

Entonces, ahora, en lugar de ingresar el mismo código para la siguiente pantalla cada vez, podemos incrustar este código en una directiva e incrustar esa directiva en cualquier momento.

Veamos un ejemplo de cómo podemos lograrlo.

Guru99 Global Event

Explicación del código:

1. En nuestro fragmento de código para una directiva personalizada, lo que cambia es solo el valor que se le da al parámetro de plantilla de nuestra directiva personalizada.

   En lugar de una etiqueta o texto del plan cinco, en realidad estamos ingresando el fragmento completo de 2 controles de entrada para el "Nombre" y la "edad" que deben mostrarse en nuestra página.

Si el código se ejecuta correctamente, se mostrará el siguiente resultado cuando ejecute su código en el navegador.

Producción:

En el resultado anterior, podemos ver que el fragmento de código de la plantilla de la directiva personalizada se agrega a la página.

Directivas y componentes de AngularJS - ng-transclude

Como mencionamos anteriormente, Angular está destinado a extender la funcionalidad de HTML. Y ya hemos visto cómo podemos inyectar código mediante el uso de directivas reutilizables personalizadas.

Pero en el desarrollo de aplicaciones web modernas, también existe un concepto de desarrollo de componentes web. Lo que básicamente significa crear nuestras propias etiquetas HTML que se pueden usar como componentes de nuestro código.

Por lo tanto, angular proporciona otro nivel de poder para extender las etiquetas HTML al brindar la capacidad de inyectar atributos en las etiquetas HTML.

Esto se hace mediante la etiqueta " ng-transclude ", que es un tipo de configuración para decirle a angular que capture todo lo que se coloca dentro de la directiva en el marcado.

Tomemos un ejemplo de cómo podemos lograrlo.

Guru99 Global Event

Angular JS

Explicación del código:

1. Estamos usando la directiva para definir una etiqueta HTML personalizada llamada 'panel' y agregando una función que pondrá un código personalizado para esta etiqueta. En la salida, nuestra etiqueta de panel personalizado mostrará el texto "AngularJS" en un rectángulo con un borde negro sólido.
2. El atributo "transclude" debe mencionarse como verdadero, que es requerido por angular para inyectar esta etiqueta en nuestro DOM.
3. En el alcance, estamos definiendo un atributo de título. Los atributos se definen normalmente como pares de nombre / valor como: nombre = "valor". En nuestro caso, el nombre del atributo en nuestra etiqueta HTML de panel es "título". El símbolo "@" es el requisito de angular. Esto se hace para que cuando se ejecute la línea title = {{title}} en el Paso 5, el código personalizado para el atributo de título se agregue a la etiqueta HTML del panel.
4. El código personalizado para los atributos del título que simplemente dibuja un borde negro sólido para nuestro control.
5. Finalmente, llamamos a nuestra etiqueta HTML personalizada junto con el atributo de título que se definió.

Si el código se ejecuta correctamente, se mostrará el siguiente resultado cuando ejecute su código en el navegador.

Producción:

• El resultado muestra claramente que el atributo de título de la etiqueta html5 del panel se ha establecido en el valor personalizado de "Angular.JS".

Directivas anidadas

Las directivas en angular se pueden anidar. Al igual que los módulos internos o las funciones en cualquier lenguaje de programación, es posible que deba incrustar directivas entre sí.

Puede obtener una mejor comprensión de esto al ver el siguiente ejemplo.

En este ejemplo, estamos creando 2 directivas llamadas "externas" e "internas".

• La directiva interna muestra un texto llamado "Interno".
• Mientras que la directiva externa en realidad hace una llamada a la directiva interna para mostrar el texto llamado "Inner".

Guru99 Global Event

Explicación del código:

1. Estamos creando una directiva llamada "externa" que se comportará como nuestra directiva principal. Esta directiva luego hará una llamada a la directiva "interna".
2. La restricción: 'E' es requerida por angular para garantizar que los datos de la directiva interna estén disponibles para la directiva externa. La letra 'E' es la forma corta de la palabra 'Elemento'.
3. Aquí estamos creando la directiva interna que muestra el texto "Inner" en una etiqueta div.
4. En la plantilla de la directiva externa (paso 4), llamamos a la directiva interna. Entonces aquí estamos inyectando la plantilla de la directiva interna a la directiva externa.
5. Finalmente, estamos llamando directamente a la directiva externa.

Si el código se ejecuta correctamente, se mostrará el siguiente resultado cuando ejecute su código en el navegador.

Producción:

De la salida,

• Se puede ver que se han llamado tanto a las directivas externas como a las internas, y se muestra el texto en ambas etiquetas div.

Manejo de eventos en una directiva

Los eventos como los clics del mouse o los clics de botones se pueden manejar desde las propias directivas. Esto se hace usando la función de enlace. La función de enlace es lo que permite que la directiva se adjunte a los elementos DOM en una página HTML.

Sintaxis:

La sintaxis del elemento de enlace es la que se muestra a continuación.

ng-repeat

link: function ($scope, element, attrs)

La función de enlace normalmente acepta 3 parámetros, incluido el alcance, el elemento con el que está asociada la directiva y los atributos del elemento de destino.

Veamos un ejemplo de cómo podemos lograr esto.

Guru99 Global Event
Click Me

Explicación del código:

1. Estamos utilizando la función de enlace como se define en angular para dar la capacidad de las directivas para acceder a eventos en el DOM HTML.
2. Estamos usando la palabra clave 'elemento' porque queremos responder a un evento para un elemento DOM de HTML, que en nuestro caso será el elemento "div". Luego usamos la función "vincular" y decimos que queremos agregar una funcionalidad personalizada al evento de clic del elemento. La palabra 'clic' es la palabra clave, que se utiliza para denotar el evento de clic de cualquier control HTML. Por ejemplo, el control de botón HTML tiene el evento click. Dado que, en nuestro ejemplo, queremos agregar un código personalizado al evento de clic de nuestra etiqueta "dev", usamos la palabra clave "clic".
3. Aquí estamos diciendo que queremos sustituir el HTML interno del elemento (en nuestro caso, el elemento div) con el texto '¡Me hiciste clic!'.
4. Aquí estamos definiendo nuestra etiqueta div para usar la directiva personalizada ng-guru.

Si el código se ejecuta correctamente, se mostrará el siguiente resultado cuando ejecute su código en el navegador.

Producción:

• Inicialmente, el texto 'Haga clic en mí' se mostrará al usuario porque esto es lo que se definió inicialmente en la etiqueta div. Cuando realmente haga clic en la etiqueta div, se mostrará el siguiente resultado

Resumen

• También se puede crear una directiva personalizada que se puede utilizar para inyectar código en la aplicación angular principal.
• Se pueden hacer directivas personalizadas para llamar a miembros definidos en el objeto de alcance en un controlador determinado mediante el uso de las palabras clave 'Controller', 'controllerAs' y 'template'.
• Las directivas también se pueden anidar para proporcionar una funcionalidad integrada que puede ser necesaria según la necesidad de la aplicación.
• Las directivas también se pueden volver a utilizar para que se puedan utilizar para inyectar código común que podría ser necesario en varias aplicaciones web.
• Las directivas también se pueden utilizar para crear etiquetas HTML personalizadas que tengan su propia funcionalidad definida según los requisitos comerciales.
• Los eventos también se pueden manejar desde las directivas para manejar eventos DOM, como los clics del botón y del mouse.