No estoy muy puesta en AngularJS, pero al parecer es lo mejorcito para aplicaciones web de una sola página. Tienes tu cabecera y tu pie, y puedes cargar el contenido de forma muy cómoda y con la lógica muy bien colocadita.
El problema es que nuestra aplicación tiene una ventana emergente. Esa ventana emergente coge datos de la ventana “padre”, y devuelve valores al cerrarse. El contenido de la ventana sigue la lógica de las vistas del resto de la aplicación, pero no debe tener ni cabecera ni pie de página. O sea que hay que ocultar la cabecera y el pie para esa vista en concreto.
Este caso particular he decidido afrontarlo creando un servicio que comunique las controladoras de la página principal y de la vista de la ventana emergente. La variable se define dentro del servicio, junto con un accesor y un mutador, y los controladores “importan” el servicio. El controlador “padre” (la de la página principal) la lee, y el controlador “hijo” (la de la vista de la ventana emergente) la modifica.
Conceptualmente es sencillo, usar un servicio para la “comunicación” entre dos controladores con ámbitos diferentes.
Pero en nuestro caso concreto, al cargar la ventana emergente, el controlador padre lee el valor de la variable, que aún no ha sido modificado, y después el controlador hijo lo modifica, así que hemos tenido que añadir un disparador y un escuchador (¿creo que se dice así en español?) al controlador hijo y al padre respectivamente, para que el controlador padre “lea” el valor de la variable después de que el controlador hijo lo modifique.
Y ahora vamos al código:
El servicio quedaría así:
app.service('ShowHideService', function() {
var hideHeaderFooter = false;
var getHideHeaderFooter = function() {
return hideHeaderFooter;
};
var setHideHeaderFooter = function(newHideHeaderFooter) {
hideHeaderFooter= newHideHeaderFooter;
};
return {
getHideHeaderFooter: getHideHeaderFooter,
setHideHeaderFooter: setHideHeaderFooter
};
});
El controlador padre queda así (la parte de la lógica que nos interesa, que puede llevar más cosas, claro):
app.controller('MainController', function ($scope, ShowHideService) {
$scope.$on('SOME_TAG', function(response) {
$scope.hideHeaderFooter = ShowHideService.getHideHeaderFooter();
})
});
El controlador hijo queda así (lo mismo que con el padre, esta es la parte de la lógica que nos interesa para este caso):
app.controller('SonController', [ '$scope', 'ShowHideService', '$rootScope',
function($scope, ShowHideService, $rootScope) {
$scope.init = function () {
ShowHideService.setHideHeaderFooter(true);
$rootScope.$broadcast('SOME_TAG', 'your value');
}
$scope.init();
}
]);
Hacer notar que en el controlador hijo, además de el servicio, hay que importar $rootScope, para poder lanzar el disparador. Aparte de eso, creo que el código es bastante autoexplicativo.
Y en la página principal, esa variable la he usado del siguiente modo:
Cuando la variable está a true, solo se muestra la vista, y si no está a true muestra la cabecera, la vista, y el pie de página.
Y ya está 😀
Como siempre, espero que esta entrada pueda ser de utilidad para alguien. Y si no, pues también como siempre, aquí tenéis un gato para compensar:
