Podemos extender el funcionamiento del HTML a través del cambio del comportamiento y transformaciones del árbol DOM, con ello podemos modificar elementos, agregar nuevos estilos y otras acciones que nos permiten desarrollar una interfaz de usuario más dinámica, para ello debemos hacer uso de las directivas.
Para ello podemos utilizar las directivas propias de AngularJS, sin embargo si necesitamos algo que no podemos conseguir de forma nativa podremos escribir nuestras propias directivas, con ello lograremos tener capacidad de escuchar y responder a eventos del navegador o simplemente realizar cosas que no hace AngularJS por defecto.
Al desarrollar una aplicación con AngularJS habrá algunas ocasiones en las cuales nos encontraremos con situaciones en las cuales las directivas nativas no cumplen con nuestra idea de lo que debe hacer nuestro código, en momentos así podemos apelar por construir nuestras propias directivas.
Para definir una nueva directiva podemos seguir la siguiente formula:
Como vemos solo debemos definir el módulo en el cual vamos a aplicar nuestra directiva y luego debemos indicar su nombre y el método que debe ejecutar.
HTML 5 tiene una funcionalidad muy interesante que es el auto focus, esto nos permite enfocar un elemento input en un formulario, ayudando así a definir el camino para un usuario, sin embargo que pasa si no contamos con HTML 5 y no queremos enfocar un input, pues ahí entra en juego AngularJS y las directivas, con una directiva podemos solventar esta situación de una forma sencilla.
Veamos el resultado de lo que queremos lograr:
Para ello debemos seguir el siguiente código, donde hemos implementado lo ya explicado:
Como vemos establecemos una directiva personalizada al inicio, ello conlleva a colocar el auto focus en el elemento que posee dicha directiva, luego construimos un controlador que nos ayudará a detectar los cambios al imprimir algunos mensajes.
Con esto finalizamos este tutorial, como vemos la manipulación del DOM es factible con AngularJS y gracias a las directivas podemos lograr efectos muy interesantes.
Para ello podemos utilizar las directivas propias de AngularJS, sin embargo si necesitamos algo que no podemos conseguir de forma nativa podremos escribir nuestras propias directivas, con ello lograremos tener capacidad de escuchar y responder a eventos del navegador o simplemente realizar cosas que no hace AngularJS por defecto.
Escribir una directiva propia
Al desarrollar una aplicación con AngularJS habrá algunas ocasiones en las cuales nos encontraremos con situaciones en las cuales las directivas nativas no cumplen con nuestra idea de lo que debe hacer nuestro código, en momentos así podemos apelar por construir nuestras propias directivas.
Para definir una nueva directiva podemos seguir la siguiente formula:
var moduloApp = angular.module('moduloApp', [...]);
moduloApp.directive('NombreDirectiva', MétodoDirectiva);
Como vemos solo debemos definir el módulo en el cual vamos a aplicar nuestra directiva y luego debemos indicar su nombre y el método que debe ejecutar.
Un ejemplo de cambiar el DOM con una directiva
HTML 5 tiene una funcionalidad muy interesante que es el auto focus, esto nos permite enfocar un elemento input en un formulario, ayudando así a definir el camino para un usuario, sin embargo que pasa si no contamos con HTML 5 y no queremos enfocar un input, pues ahí entra en juego AngularJS y las directivas, con una directiva podemos solventar esta situación de una forma sencilla.
¿Qué debemos hacer?
Primero debemos construir una directiva personalizada utilizando la forma que hemos indicado anteriormente, con ello establecemos el comportamiento deseado, en este caso el auto focus. Luego gracias al objeto $scope podemos aplicar dicha directiva a cualquier elemento, en el caso de este ejemplo vamos a aplicarlo a un link, con ello podremos experimentar el poder de AngularJS.
Veamos el resultado de lo que queremos lograr:
Para ello debemos seguir el siguiente código, donde hemos implementado lo ya explicado:
<html ng-app>
<head>
<script src="https:/ /ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script>
var appModule = angular.module('app', []);
appModule.directive('ngbkFocus', function() {
return {
link: function(scope, element, attrs, controller) {
element[0].focus();
}
};
});
function nuestroController($scope) {
$scope.mensaje = { texto: 'No hemos hecho click!' };
$scope.clickSinFoco = function (){
$scope.mensaje = { texto: 'Click en el boton sin foco'};
};
$scope.clickConFoco = function () {
$scope.mensaje = { texto: 'Click en el boton con foco'};
}
}
var appModule = angular.module('app', ['directives']);
</script>
</head>
<body ng-controller="nuestroController">
<button ng-click="clickSinFoco()">
Sin Foco
</button>
<button ngbkFocus ng-click="clickConFoco()">
Con Foco
</button>
<div>{{mensaje.texto}}</div>
</body>
</html>
Como vemos establecemos una directiva personalizada al inicio, ello conlleva a colocar el auto focus en el elemento que posee dicha directiva, luego construimos un controlador que nos ayudará a detectar los cambios al imprimir algunos mensajes.
Con esto finalizamos este tutorial, como vemos la manipulación del DOM es factible con AngularJS y gracias a las directivas podemos lograr efectos muy interesantes.
