javascript - transparente - Mostrar ventanas emergentes de la manera más elegante

ventana modal javascript

Question

Tengo esta aplicación AngularJS. Todo funciona bien

Ahora tengo que mostrar diferentes ventanas emergentes cuando las condiciones específicas se vuelvan realidad, y me pregunto cuál sería la mejor manera de proceder.

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

Opción 1

Pude crear el nuevo elemento HTML para la ventana emergente y anexar al DOM directamente desde el controlador.

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

opcion 2

Siempre pude insertar el código para todas las ventanas emergentes en el archivo HTML estático. Luego, usando ngShow , puedo ocultar / mostrar solo la ngShow 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.

Answer 1

Angular-ui viene con una directiva de diálogo. Úselo y establezca templateurl en la página que desee incluir. Esa es la manera 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.

Answer 2

Es gracioso porque estoy aprendiendo Angular y estaba viendo algunos videos de su canal en Youtube. El hablante menciona su problema exacto en este video https://www.youtube.com/watch?v=ZhfUv0spHCY#t=1681 alrededor de la marca de 28:30 minutos.

Se trata de colocar esa pieza 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.

El video completo es muy interesante de ver también :-)

Answer 3

Sobre la base de mi experiencia con 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 mostrarse en un 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 bootstrap de AngularUI ( http://angular-ui.github.com/bootstrap/ ) tiene un excelente servicio $modal (solía llamarse $ dialog antes de la versión 0.6.0) que es una implementación de un servicio para mostrar los parciales contenido como una ventana emergente modal.

Answer 4

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 desde http://likeastore.github.io/ngDialog que es flexible y no tiene dependencias.

Answer 5

• Cree una directiva ''emergente'' y aplíquela al contenedor del contenido emergente
• En la directiva, ajuste el contenido en una div posición absoluta junto con la máscara div debajo de él.
• Está bien mover los 2 divs en el árbol DOM según sea necesario dentro de la directiva. Cualquier código de UI está bien en las directivas, incluido el código para colocar la ventana emergente en el centro de la pantalla.
• Crea y enlaza un indicador booleano al controlador. Esta bandera controlará la visibilidad.
• Cree variables de ámbito que se vinculen a las funciones de Aceptar / 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;
});