En este tutorial voy a enseñaros cómo comunicar dos o n directivas entre sí.
Esto se logra mediante llamadas al controlador que poseen.
Vamos a ver un ejemplo de una jerarquía de directivas:
|
1 2 3 4 5 |
<libro> <pagina> <parrafo></parrafo> </pagina> </libro> |
Empezamos creando la directiva libro.
|
1 2 3 4 5 6 7 8 9 10 11 |
var app = angular.module("app, []); app.directive("libro",function () { return { restrict: "E", controller: function () { this.tituloLibro = function (titulo) { console.log("Titulo del libro: " + titulo); } } } }); |
Tiene un controlador con una funcionalidad de prueba, que imprimirá el título del libro.
A este controlador accederemos desde otra directiva, la directiva página.
|
1 2 3 4 5 6 7 8 9 |
app.directive ("pagina", function () { return { restrict: "E", require: "^libro", link: function(scope, element, attrs, libroCtrl) { libroCtrl.tituloLibro("Dune"); } } }); |
Si ahora ejecutamos nuestro proyecto, aparecerá por consola el texto:
|
1 |
Titulo del libro: Dune |
Lo vamos a complicar un poco más.
Creamos otra directiva que utilice las dos que ya tenemos. El primer paso es refactorizar la directiva «pagina» para que tenga un controlador propio.
|
1 2 3 4 5 6 7 8 9 10 |
app.directive ("pagina", function () { return { restrict: "E", controller: function () { this.numeroPagina = function (nPagina) { console.log("Numero de pagina " + nPagina); } } } }); |
Ya tenemos una directiva «pagina» con una función en su controlador a la que llamar desde nuestra nueva directiva, «parrafo». Esta va a recibir un array de controladores, que en este caso van a ser el de «libro» y el de «pagina».
|
1 2 3 4 5 6 7 8 9 10 |
app.directive("parrafo", function(){ return { restrict:"E", require: ["^libro","^pagina"], link: function (scope, element, attrs, ctrls){ ctrls[0].tituloLibro("Guia del Autoestopista Galactico"); ctrls[1].numeroPagina("42"); } } }); |
En esta ocasión la salida por la consola será:
|
1 2 |
Titulo del libro: Guia del Autoestopista Galactico Numero de pagina 42 |
Como anteriormente, hacemos uso del require para obtener información de las otras directivas, la diferencia esta vez radica en que recibimos un array de controladores, y accedemos a ellos en el orden en el que los hemos declarado en el require.
Espero que os haya servido para crear vuestras propias directivas enlazadas y hacer más mantenibles vuestros programas.
Si queréis una información más detallada de cómo funciona el «controller» y el «link» de las directivas más allá de que el «controller» se utiliza para exponer un API y el link para consumirla, os aconsejo leer estos artículos (en inglés):
gracias es genial, lo unico q no me queda muy claro cuando usas » libroCtrl » en la directive pagina, es de donde obtienes ese nombre, ya que en la directive libro en controller nunca lo llamas » libroCtrl » y en el require se estaria pasando el nombre de la directive padre verdad?