7

Was ist die beste Vorgehensweise beim Erstellen modaler Dialoge mit dynamischem Inhalt im Gegensatz zu Dialogen ohne dynamischen Inhalt?Best Practices für die Verwendung von eckigen modalen Dialogen

ZB .. Wir haben einige modale Formen, die eine Liste von Formularelementen akzeptieren, und senden/abbrechen. Es gibt auch modale Dialoge, die nur eine Operation bestätigen/ok anzeigen.

Ich habe eine Menge Leute gesehen, die sagen, dass Dialoge Dienste an den Controller übergeben werden sollten, aber es scheint mir, dass Dienste keine UI-Komponenten wiedergeben und das DOM manipulieren sollten.

Was ist die beste Vorgehensweise zum Zusammenstellen dieser beiden Arten von Dialogen? Vielen Dank.

Antwort

2

Da Dialoge DOM-Komponenten sind, sollten sie wahrscheinlich Direktiven sein. Sie können entweder die DOM-Elemente des Modals innerhalb der Direktive selbst aufbauen oder die Elemente auf der Haupt-HTML-Seite verstecken und sie aus der Direktive einblenden. Wenn Sie den Gültigkeitsbereich der Richtlinie nicht isolieren, können Sie nur den Controller-Bereich (außer Sie befinden sich in einem untergeordneten Bereich) von der Direktive ablesen.

Dynamischer oder statischer Inhalt ist nicht so sehr ein Entscheidungspunkt IMO. Da Sie innerhalb der Direktive Zugriff auf den Bereich haben, können Sie aus dem geerbten Bereich auf alles zugreifen, was Sie benötigen.

+0

Ich mag diesen Ansatz am besten. Noch besser, jemand hat sich die Zeit genommen, ein grundlegendes Programm zu implementieren: https://github.com/adamalbrecht/ngModal – joescii

6

Angular UI Boostrap bietet einen Service - $dialog - der überall dort eingegeben werden kann, wo Sie ein Dialogfeld verwenden müssen. Dieser Dienst hat zwei Hauptmethoden: dialog und messageBox. Der erste wird verwendet, um einen Dialog mit dynamischem Inhalt zu erstellen, und der zweite, um ein Nachrichtenkasten mit einem Titel, einer Nachricht und einer Reihe von Schaltflächen zu erstellen. Beide geben ein Versprechen zurück, sodass Sie das Ergebnis verarbeiten können, sobald es verfügbar ist.

Ich denke, dieser Ansatz funktioniert gut, weil es die irgendwie natürliche, imperative Art der Handhabung von Dialogen passt. Zum Beispiel, wenn der Benutzer auf eine Schaltfläche klickt, und Sie möchten einen Dialog zeigen, und dann das Ergebnis verarbeiten, könnte der Code wie folgt aussehen:

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

Sie tatsächlich Richtlinien verwenden können, das gleiche zu tun, und vielleicht ist es scheint der richtige Weg dazu zu sein, da DOM-Manipulation involviert ist, aber ich denke, es wäre irgendwie peinlich, damit umzugehen. Das vorherige Beispiel würde etwa so aussehen:

<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, das erste Beispiel sieht besser aus und es ist leichter zu verstehen.

1

Ein ganz einfaches Design, das gut funktioniert, ist zu:

  1. haben eine solche "modaler Dialog" div irgendwo in Ihrem HTML. Es ist normalerweise absolut, nimmt die gesamte Bildschirmbreite und -höhe (typischerweise ein dunkles durchscheinendes div mit einem kleineren dialog) und wird nicht standardmäßig angezeigt (benutze ng-show, um es bedingt anzuzeigen, abhängig von der Existenz von modalen oder nicht))
  2. Deklarieren Sie einen Controller , der auf Dialogereignisse ("dialogShow", "dialogClose" usw.) hört und seinen Wert "currentModal" $ scope ändert, wenn er sie empfängt. Gemäß der ng-show-Bedingung im vorherigen Schritt wird das modale entsprechend angezeigt oder geändert oder ausgeblendet (wenn auf null/undefiniert gesetzt) ​​
  3. Auslösen von Dialogereignissen von überall in Ihrer Anwendung, mit Broadcasts.

Verbesserungen sind:

  • Events Parameter Eigenschaften könnten Titel, Nachricht, Bilder, auch html (werden hygienisiert), Knöpfe, Rückrufe für diejenigen (Setup, wenn durch die Steuerung Triggerung und empfangen) Tasten, Anzeigedauer (durch $ timeout)
  • Erinnern Sie sich an einen Stapel empfangener Warnungen. Wenn einer geschlossen ist, zeigt der nächste anstehende
Verwandte Themen