Mostra i popup nel modo più elegante

Ho questa app AngularJS. Tutto funziona bene.

Ora devo mostrare diversi popup quando si verificano condizioni specifiche e mi chiedevo quale sarebbe il modo migliore di procedere.

Attualmente sto valutando due opzioni, ma sono assolutamente aperto ad altre opzioni.

opzione 1

Potrei creare il nuovo elemento HTML per il pop-up e aggiungerlo al DOM direttamente dal controller.

Ciò interromperà il modello di progettazione MVC. Non sono contento di questa soluzione.

opzione 2

Potrei sempre inserire il codice per tutti i popup nel file HTML statico. Quindi, usando ngShow, posso nascondere / mostrare solo il pop-up corretto.

Questa opzione non è davvero scalabile.

Quindi sono abbastanza sicuro che ci debba essere un modo migliore per ottenere ciò che voglio.

Sulla base della mia esperienza con i modali AngularJS finora credo che l'approccio più elegante sia un servizio dedicato al quale possiamo fornire un modello parziale (HTML) da visualizzare in un modale.

Quando ci pensiamo, i modali sono una specie di rotte AngularJS, ma vengono semplicemente visualizzati nel popup modale.

Il progetto bootstrap AngularUI ( http://angular-ui.github.com/bootstrap/ ) ha un $modalservizio eccellente (un tempo chiamato $ dialog prima della versione 0.6.0) che è un'implementazione di un servizio per visualizzare il contenuto di partial come un popup modale.

È divertente perché sto imparando Angular me stesso e stavo guardando alcuni video dal loro canale su Youtube. L'oratore menziona il tuo esatto problema in questo video https://www.youtube.com/watch?v=ZhfUv0spHCY#t=1681 intorno al segno dei 28:30 minuti.

Si tratta di mettere quel particolare pezzo di codice in un servizio piuttosto che in un controller.

La mia ipotesi sarebbe quella di iniettare nuovi elementi popup nel DOM e gestirli separatamente invece di mostrare e nascondere lo stesso elemento. In questo modo puoi avere più popup.

Anche l'intero video è molto interessante da guardare :-)

• Creare una direttiva "popup" e applicarla al contenitore del contenuto popup
• Nella direttiva, avvolgi il contenuto in un div di posizione assoluta insieme al div maschera sotto di esso.
• Va bene spostare i 2 div nell'albero DOM secondo necessità all'interno della direttiva. Qualsiasi codice UI è OK nelle direttive, incluso il codice per posizionare il popup al centro dello schermo.
• Crea e associa un flag booleano al controller. Questa bandiera controllerà la visibilità.
• Creare variabili di ambito che si legano alle funzioni OK / Annulla, ecc.

Modifica per aggiungere un esempio di alto livello (non funzionale)

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

Vedi http://adamalbrecht.com/2013/12/12/creating-a-simple-modal-dialog-directive-in-angular-js/ per un modo semplice di fare un dialogo modale con Angular e senza bisogno di bootstrap

Modifica: da allora utilizzo ng-dialog da http://likeastore.github.io/ngDialog che è flessibile e non ha dipendenze.

Angular-ui viene fornito con la direttiva dialog. Usalo e imposta templateurl su qualunque pagina tu voglia includere. Questo è il modo più elegante e l'ho usato anche nel mio progetto. È possibile passare diversi altri parametri per la finestra di dialogo secondo necessità.