¿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.
Event Registration Guru99 Global Event
Explicación del código:
- 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.
- 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.
- 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.
- 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.
Event Registration Guru99 Global Event
Explicación del código:
- 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".
- 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.
- 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.
- 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.
Event Registration Guru99 Global Event
Explicación del código:
- 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.
- En nuestra directiva personalizada, mencionamos específicamente que queremos usar el controlador "DemoController" usando la palabra clave del parámetro del controlador.
- 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.
- 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.
Event Registration Guru99 Global Event
Explicación del código:
- 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.
Event Registration Guru99 Global Event
Angular JS
Explicación del código:
- 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.
- El atributo "transclude" debe mencionarse como verdadero, que es requerido por angular para inyectar esta etiqueta en nuestro DOM.
- 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.
- El código personalizado para los atributos del título que simplemente dibuja un borde negro sólido para nuestro control.
- 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