Mostrar ventanas emergentes de la manera más elegante

Tengo esta aplicación AngularJS. Todo funciona bien.

Ahora necesito mostrar diferentes ventanas emergentes cuando las condiciones específicas se vuelven realidad, y me preguntaba cuál sería la mejor manera de proceder.

Actualmente estoy evaluando dos opciones, pero estoy absolutamente abierto a otras opciones.

Opción 1

Podría crear el nuevo elemento HTML para la ventana emergente y agregarlo al DOM directamente desde el controlador.

Esto romperá el patrón de diseño MVC. No estoy contento con esta solución.

opcion 2

Siempre podría insertar el código para todas las ventanas emergentes en el archivo HTML estático. Luego, usando ngShow, puedo ocultar / mostrar solo la ventana emergente correcta.

Esta opción no es realmente escalable.

Así que estoy bastante seguro de que tiene que haber una mejor manera de lograr lo que quiero.

Según mi experiencia con los modales de AngularJS hasta el momento, creo que el enfoque más elegante es un servicio dedicado al que podemos proporcionar una plantilla parcial (HTML) para que se muestre en modo modal.

Cuando pensamos en ello, los modales son una especie de rutas AngularJS pero solo se muestran en una ventana emergente modal.

El proyecto de arranque de AngularUI ( http://angular-ui.github.com/bootstrap/ ) tiene un excelente $modalservicio (solía llamarse $ dialog antes de la versión 0.6.0) que es una implementación de un servicio para mostrar el contenido parcial como una ventana emergente modal.

Es divertido porque 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 de las 28:30 minutos.

Todo se reduce a colocar ese fragmento de código en particular en un servicio en lugar de un controlador.

Mi suposición 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 múltiples 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 una posición absoluta div junto con la máscara div debajo de ella.
• Está bien mover los 2 divs en el árbol DOM según sea necesario 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 enlace una bandera booleana al controlador. Esta bandera controlará la visibilidad.
• Cree variables de alcance que se unan a las funciones OK / Cancelar, etc.

Edición para agregar un ejemplo de alto nivel (no funcional)

<div id='popup1-content' popup='showPopup1'>
  ....
  ....
</div>


<div id='popup2-content' popup='showPopup2'>
  ....
  ....
</div>



.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;
});

Ver http://adamalbrecht.com/2013/12/12/creating-a-simple-modal-dialog-directive-in-angular-js/ para una forma simple de hacer un diálogo modal con Angular y sin necesidad de bootstrap

Editar: desde entonces he estado usando ng-dialog de http://likeastore.github.io/ngDialog, que es flexible y no tiene dependencias.

Angular-ui viene con una directiva de diálogo. Úselo y configure templateurl en la página que desee incluir. Esa es la forma más elegante y también la he usado en mi proyecto. Puede pasar varios otros parámetros para el diálogo según las necesidades.