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:
<libro>
<pagina>
<parrafo></parrafo>
</pagina>
</libro>
Empezamos creando la directiva libro.
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.
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:
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.
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».
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á:
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):
Un comentario
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?