7

Qual è la procedura migliore per creare finestre di dialogo modali con contenuto dinamico, in contrasto con finestre di dialogo che non hanno contenuto dinamico.Migliori pratiche di dialogo modale angolare

Ad es. Abbiamo alcune forme modali che accettano un elenco di elementi del modulo e hanno invio/annullamento. Inoltre, ci sono finestre di dialogo modali che mostrano solo un tipo di operazione di conferma/ok.

Ho visto un sacco di persone dire che i dialoghi dovrebbero essere servizi passati al controller, ma mi sembra che i servizi non debbano rendere i componenti dell'interfaccia utente e manipolare il DOM.

Qual è la procedura migliore per assemblare questi due tipi di finestre di dialogo? Grazie.

risposta

2

Poiché le finestre di dialogo sono componenti DOM, dovrebbero probabilmente essere direttive. Puoi costruire gli elementi DOM della modale all'interno della direttiva stessa oppure mettere gli elementi nella pagina html nascosta e mostrarli dalla direttiva. Se non si isola l'ambito della direttiva, è sufficiente fare riferimento all'ambito del controller (a meno che non si sia in un ambito figlio) dalla direttiva.

Il contenuto dinamico o statico non è tanto un punto di decisione IMO. Dal momento che si ha accesso all'ambito all'interno della direttiva, è possibile accedere a qualsiasi cosa sia necessaria dall'ambito ereditato.

+0

Mi piace questo approccio migliore. Ancora meglio, qualcuno ha avuto il tempo di implementare uno di base da cui iniziare: https://github.com/adamalbrecht/ngModal – joescii

6

UI angolare Boostrap fornisce un servizio - $dialog - che può essere iniettato ovunque sia necessario utilizzare una finestra di dialogo. Questo servizio ha due metodi principali: dialog e messageBox. Il primo è utilizzato per creare una finestra di dialogo con contenuto dinamico e il secondo per creare una finestra di messaggio con un titolo, un messaggio e un set di pulsanti. Entrambi restituiscono una promessa in modo che tu possa elaborare il suo risultato, quando è disponibile.

Penso che questo approccio funzioni bene, perché si adatta al modo naturale e imperativo di gestire i dialoghi. Ad esempio, se l'utente fa clic su un pulsante e si desidera mostrare una finestra di dialogo e quindi elaborare il suo risultato, il codice potrebbe essere la seguente:

$scope.doSomething = function() { 
    $dialog.dialog().open().then(function(result) { 
     if (result === OK) { 
      // Process OK 
     } 
     else { 
      // Process anything else 
     } 
    }); 
} 

È infatti possibile utilizzare le direttive di fare lo stesso, e forse sembra il modo giusto per farlo visto che c'è la manipolazione del DOM, ma penso che sarebbe un po 'scomodo gestirlo. L'esempio precedente sarebbe qualcosa di simile a questo:

<dialog visible="dialogVisible" callback="dialogCallback()"></dialog> 

... 

$scope.doSomething = function() { 
    $scope.dialogVisible = true; 
} 

$scope.dialogCallback = function(result) { 
    if (result === OK) { 
     // Process OK 
    } 
    else { 
     // Process anything else 
    } 
} 

IMO, il primo esempio sembra migliore ed è più facile da capire.

1

uno abbastanza design semplice che funziona bene è quello di:

  1. un div "finestra di dialogo modale " come da qualche parte nel tuo html. In genere sarà assoluto, prendendo tutta la larghezza e l'altezza dello schermo (in genere un div scuro traslucido con una finestra di dialogo div più piccola) e non visualizzato di default (usa ng-show per visualizzarlo in modo condizionale, a seconda dell'esistenza di modali o meno
  2. Dichiarare un controller che ascolta gli eventi di dialogo ("dialogShow", "dialogClose", ecc.) E modificare il valore del valore $ "currentModal" quando li riceve. Secondo l'impostazione della condizione ng-show nel passaggio precedente, il modale verrà visualizzato o modificato o sparirà (se impostato su null/non definito)
  3. Eventi di dialogo di trigger da qualsiasi punto dell'applicazione, utilizzando le trasmissioni.

I miglioramenti sono:

  • Eventi parametri proprietà (impostazione quando si attivano e ricevuto dal controllore) potrebbe includere titolo, un messaggio, le immagini, anche HTML (da sanificare), pulsanti, callback per coloro pulsanti, durata del display (fino a $ timeout)
  • Ricordare una serie di avvisi ricevuti. Quando uno è chiuso, il prossimo in sospeso mostra