Posteriormente a observar en diferentes repositorios y sitios de internet al terminar hemos descubierto la respuesta que te mostramos pronto.
Solución:
Según mi experiencia con los modales de AngularJS hasta ahora, creo que el enfoque más elegante es un servicio dedicado al que podemos proporcionar una plantilla parcial (HTML) para que se muestre en un modal.
Cuando lo pensamos, los modales son una especie de rutas AngularJS, pero solo se muestran en una ventana emergente modal.
El proyecto de arranque AngularUI (http://angular-ui.github.com/bootstrap/) tiene una excelente $modal service (solía llamarse $dialog antes de la versión 0.6.0) que es una implementación de un servicio para mostrar contenido parcial como una ventana emergente modal.
Es gracioso porque yo mismo estoy aprendiendo Angular y estaba viendo algunos videos de su canal en Youtube. El orador menciona su problema exacto en este video https://www.youtube.com/watch?v=ZhfUv0spHCY#t=1681 alrededor del minuto 28:30.
Todo se reduce a colocar esa pieza de código en particular en un servicio en lugar de un controlador.
Supongo que sería inyectar nuevos elementos emergentes en el DOM y manejarlos por separado en lugar de mostrar y ocultar el mismo elemento. De esta manera, puede tener varias ventanas emergentes.
Todo el video también es muy interesante de ver 🙂
- Cree una directiva ’emergente’ y aplíquela al contenedor del contenido emergente
- En la directiva, envuelva el contenido en un div de posición absoluta junto con el div de máscara debajo.
- Está bien mover los 2 divs en el árbol DOM según sea necesario desde dentro de la directiva. Cualquier código de IU está bien en las directivas, incluido el código para colocar la ventana emergente en el centro de la pantalla.
- Cree y vincule una bandera booleana al controlador. Esta bandera controlará la visibilidad.
- Cree variables de alcance que se vinculen con las funciones Aceptar/Cancelar, etc.
Edición para agregar un ejemplo de alto nivel (no funcional)
....
....
....
....
.directive('popup', function()
var p =
link : function(scope, iElement, iAttrs)
//code to wrap the div (iElement) with a abs pos div (parentDiv)
// code to add a mask layer div behind
// if the parent is already there, then skip adding it again.
//use jquery ui to make it dragable etc.
scope.watch(showPopup, function(newVal, oldVal)
if(newVal === true)
$(parentDiv).show();
else
$(parentDiv).hide();
);
return p;
);
Si entiendes que ha resultado de ayuda este post, sería de mucha ayuda si lo compartes con más desarrolladores y nos ayudes a dar difusión a este contenido.