Cómo crear una directiva CUSTOM en AngularJS con 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 potentes fuera de la caja, en ocasiones se requieren directivas personalizadas.

En este tutorial, usted aprenderá –

¿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 “AngularJS Tutorial” en nuestra página cuando se llama a la directiva.

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á 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 aduanera debe comenzar con las letras “ng’. En segundo lugar, el símbolo de guión “-” sólo debe mencionarse al llamar a la directiva. En tercer lugar, la primera letra que sigue a las letras “ng” al definir la directiva puede ser mayúscula o minúscula.

  1. Estamos utilizando el parámetro de plantilla que un parámetro definido por Angular para directivas personalizadas. En esto, estamos definiendo que cada vez que se usa esta directiva, simplemente use el valor de la plantilla e inyéctelo en el código de llamada.
  2. Aquí estamos haciendo uso de nuestra directiva creada por encargo “ng-guru”. Cuando hacemos esto, el valor que definimos para nuestra plantilla “<div>Angular JS Tutorial</div>” ahora se inyectará aquí.

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

Salida:

  • La salida 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 ámbito se define como el pegamento que une el controlador a la vista mediante la administración de los datos entre la vista y el controlador.

Al crear directivas AngularJS personalizadas, por defecto tendrán acceso al objeto de ámbito en el controlador principal.

De esta manera, es 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.

Explicación del código:

  1. Primero creamos un controlador llamado, “DemoController”. En esto, definimos una variable llamada tutorialName y adjuntarlo al objeto ámbito en una declaración – $scope.tutorialName = “AngularJS”.
  2. En nuestra directiva personalizada, podemos llamar a la variable “TutorialName” mediante el uso de 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á la siguiente salida cuando ejecute su código en el navegador.

Salida:

  • La salida anterior muestra claramente que nuestra directiva personalizada “ng-guru” hace uso de la variable de alcance tutorialName en el controlador padre.

Uso de controladores con directivas

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

Esto se hace necesario a veces porque en una aplicación puede tener varios objetos de ámbito pertenecientes a varios controladores.

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

En tal escenario, hay una manera de mencionar específicamente decir “Quiero acceder a este controlador específico” de mi directiva.

Echemos un vistazo a un ejemplo de cómo podemos lograr esto.

Explicación del código:

  1. Primero creamos un controlador llamado, “DemoController”. En esto vamos a definir una variable llamada “TutorialName” y esta vez en lugar de adjuntarla al objeto scope, la adjuntaremos directamente al controlador.
  2. En nuestra directiva personalizada, estamos mencionando específicamente que queremos usar el controlador “DemoController” mediante el uso de la palabra clave del parámetro controlador.
  3. Creamos una referencia al controlador usando el parámetro “Controlleras”. Esto es definido por Angular y es la forma de hacer referencia al controlador como una referencia.

Nota: –Es posible acceder a múltiples controladores en una directiva especificando los bloques respectivos del controlador, Controlleras y sentencias de plantilla.

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

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

Salida:

La salida muestra claramente que la directiva personalizada está accediendo especialmente al DemoController y a 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 construyendo nuestras propias directivas reutilizables.

Digamos, por ejemplo, que queríamos inyectar código que siempre mostrara las siguientes etiquetas HTML en varias pantallas, que básicamente es solo una entrada para el “Nombre” y “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).

Así que 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 en el tiempo.

Veamos un ejemplo de cómo podemos lograrlo.

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 da al parámetro de plantilla de nuestra directiva personalizada.
    En lugar de una etiqueta de plan cinco o texto, en realidad estamos ingresando todo el fragmento de 2 controles de entrada para el “Nombre” y “edad” que debe mostrarse en nuestra página.

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

Salida:

De la salida 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 bastante antes, Angular está destinado a extender la funcionalidad de HTML. Y ya hemos visto cómo podemos tener la inyección de 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 en nuestro código.

Por lo tanto angular proporciona otro nivel de potencia para extender etiquetas HTML dando la capacidad de inyectar atributos en las etiquetas HTML en sí.

Esto lo hace la etiqueta “ng-transclude”, que es una especie de configuración para decirle angular que capture todo lo que se pone dentro de la directiva en el marcado.

Tomemos un ejemplo de cómo podemos lograr esto.

Explicación del código:

  1. Estamos utilizando la directiva para definir una etiqueta HTML personalizada llamada ‘panel’ y agregar una función que pondrá algún 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 ámbito, estamos definiendo un atributo de título. Los atributos se definen normalmente como pares nombre/valor como: nombre=”valor”. En nuestro caso, el nombre del atributo en nuestra etiqueta HTML del panel es “title”. El símbolo “@” es el requisito de angular. Esto se hace de modo que cuando la línea title= {{title}} se ejecuta en el paso 5, el código personalizado para el atributo title se agrega 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. Por último, estamos llamando a nuestra etiqueta HTML personalizada junto con el atributo title que se definió.

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

Salida:

  • La salida muestra claramente que el atributo title de la etiqueta html5 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 necesite incrustar directivas entre sí.

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

En este ejemplo, estamos creando 2 directivas llamadas “externo” e “interno”.

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

Explicación del código:

  1. Estamos creando una directiva llamada “externa” que se comportará como nuestra directiva matriz. Esta directiva hará entonces 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 exterior. 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 para la directiva externa (paso #4), estamos llamando a la directiva interna. Así que aquí estamos inyectando la plantilla de la directiva interna a la directiva externa.
  5. Por último, estamos llamando directamente a la directiva exterior.

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

Salida:

De la salida,

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

Manejo de eventos en una directiva

Los eventos tales clics del ratón o clics de botones se pueden manejar desde dentro de las directivas mismas. 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 como se muestra a continuación

ng-repeat

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

Veamos un ejemplo de cómo podemos lograr esto.

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 utilizando la palabra clave ‘element’ porque queremos responder a un evento para un elemento HTML DOM, que es en nuestro caso será el elemento “div”. A continuación, estamos utilizando la función “bind” y diciendo que queremos agregar funcionalidad personalizada al evento click del elemento. La palabra ‘clic’ es la palabra clave, que se utiliza para denotar el evento clic de cualquier control HTML. Por ejemplo, el control de botón HTML tiene el evento clic. Dado que, en nuestro ejemplo, queremos añadir un código personalizado al evento click de nuestra etiqueta “dev”, utilizamos la palabra clave ‘click’.
  3. Aquí estamos diciendo que queremos sustituir el HTML interno del elemento (en nuestro caso el elemento div) con el texto “¡Usted hizo clic en mí!”.
  4. Aquí estamos definiendo nuestra etiqueta div para usar la directiva personalizada ng-guru.

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

Salida:

  • Inicialmente, el texto ‘Click Me’ se mostrará al usuario porque esto es lo que se ha definido inicialmente en la etiqueta div. Cuando realmente haga clic en la etiqueta div, se mostrará la siguiente salida

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 determinado controlador mediante el uso de las palabras clave ‘Controller’, ‘Controlleras’ y ‘template’.
  • Las directivas también se pueden anidar para proporcionar funcionalidad incrustada que puede ser necesaria dependiendo de la necesidad de la aplicación.
  • Las directivas también pueden ser reutilizables para que se puedan usar para inyectar código común que podría ser necesario en varias aplicaciones web.
  • Las directivas también se pueden usar para crear etiquetas HTML personalizadas que tendrían su propia funcionalidad definida según el requisito del negocio.
  • Los eventos también se pueden manejar desde directivas para manejar eventos DOM como clics de botón y mouse.
0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *