Angular UI Bootstrap-modal - verwenden Sie benutzerdefinierte modales Fenster

Wie in dem link http://angular-ui.github.io/bootstrap ( wählen Sie aus modal-Richtlinie drop-down auf der Oberseite), es gibt einen parameter namens windowTemplateUrl die verwendet wird, um über die Fahrt der modal content. Also, im Falle, dass wir uns mit diesem, was zu geben in templateUrl oder eine Vorlage, wie man diese erforderlich ist für den Aufruf der open-Funktion von modal. Für z.B. den code ist unten angegeben.

$scope.open = function(){
  var modalInstance = $modal.open({
      windowTemplateUrl : '/client/content.html'
  })
}

Wenn ich den code wie oben, es gibt Fehler, die templateUrl oder eine Vorlage erforderlich ist. So, wie verwende ich windowTemplateUrl.

  • Wollen Sie modal öffnen im separaten Browser-Fenster?
  • Nein, es sollte auf der gleichen Seite, nur über den modalen hintergrund oder überlagerung
  • Dieser link könnte nützlich sein , popdevelop.com/2014/07/...
InformationsquelleAutor whyAto8 | 2014-07-11
  1. 8

    windowTemplateUrl ist eine Vorlage für die Fenster Dekoration: https://github.com/angular-ui/bootstrap/blob/master/template/modal/window.html

    Müssen Sie noch liefern modal ist Inhalt (mit template oder templateUrl), dass Sie möchten, um zu sehen, verziert.

    • Nun, in diesem Fall, gibt es eine Möglichkeit, die ich vermeiden kann das regelmäßige modal-Fenster, das kommt mit weißem hintergrund (wie im link oben selbst, nach einem Klick auf open) und meine eigenen modalen Inhalte, die könnte überall sein auf der Seite, nicht nur zentriert.
    • Sicher, Sie tun nur, was die Dekoration mit dem, was CSS Sie wollen, und dann die Inhalte platziert werden innerhalb der vorgesehenen Dekoration Vorlage.
    • Gut, wäre es möglich, einen kleinen Beispiel-code, d.h. was zu schreiben in open-Funktion. Das würde mir wirklich helfen, eine Menge. Vielen Dank im Voraus.
    • sicher, senden Sie einfach eine plunk mit dem, was Sie bisher ausprobiert habe
    • Hier ist der plunk - plnkr.co/Bearbeiten/cWJkz2GjAjNE3JcgakGq?p=Album Vorhören , es ist nicht meine eigentliche code, nur eine demo Art. Ich habe nicht enthalten die parameter windowTemplateUrl, da ich nicht weiß, wie es zu benutzen. Der Inhalt customModal.html erscheinen soll anstelle der benutzerdefinierten modal content. Bitte lassen Sie mich wissen, was zu tun ist. Danke.
    • Würde schätzen, wenn Sie könnten bitte helfen mir mit den erforderlichen plunk änderungen.
    • Viel Glück mit diesem. Im zu bemerken, dass es gibt nicht viele (keine) Beispiele nichts mit windowTemplateUrl.
    • Dies ist guckten mir zu. Ich kann, liefern Sie eine Vorlage mit windowTemplateUrl, aber ich habe keine Ahnung wie die das machen, die zeigen, dass meine content-template.
    • Ok, hier ist ein plunk mit windowTemplateUrl: plnkr.co/Bearbeiten/WwL6tM?p=Album Vorhören ich kopierte die Vorlage, html-src aus dem UI-Bootstrap-src und modifiziert es: github.com/angular-ui/bootstrap/blob/master/template/modal/...

    InformationsquelleAutor pkozlowski.opensource
  2. 2

    Dies ist, wie windowTemplateUrl arbeitet 

    $scope.open = function () {

var modalInstance = $modal.open({
  templateUrl:'myModalContent.html',
  windowTemplateUrl: 'customModal.html',
  controller: 'ModalInstanceCtrl',
  resolve: {
  params: function(){
     return {
        title: 'Custom title 2'
           };
         }
      }
   });
};

    Original-version von angular-ui (funktioniert nicht)

    Modifizierte version von angular-ui - (Arbeits -)

    • Wie können wir den Wert in customModal.html beide {{title}} und {{params.title}} hat nicht gearbeitet?
    • Hier ist ein gemeldeter Fehler github.com/angular-ui/bootstrap/issues/3134 und pull-request github.com/angular-ui/bootstrap/pull/3133
    • dieses Beispiel funktioniert nicht
    • Warum also berichtete ich einem bug auf der angularui isssues Seite 🙂
    • Ich aktualisiert meine Antwort...
    • Ich will ändern den modal-Vorlage auch die dunklen overlay. Wie kann ich mehrere Dateien in windowTemplateUrl?
    • Dies funktioniert für mich, da konnte ich nicht bestimmen, den fullpath des Standard-windowTemplateUrl auf meine dynamische route war es viel einfacher zu implementieren eine benutzerdefinierte ein. Danke.
    • Ich brauche deine Lösung, aber ich bin nicht in der Lage, Sie zu implementieren, in meinem Projekt. Ich kopierte die Vorlage und aktiviert ist es, aber es wird nicht angezeigt. Ich sehe nur schwarzen hintergrund und den modal wird nicht angezeigt. Schätzen Sie es, wenn Sie mir erklären, wie die Umsetzung der funktionierenden Lösung in meinem Projekt.
    • es arbeitet plnkr link. Versuchen Sie, prüfen Sie den Quellcode und dev-tools console-Nachrichten in Ihrem Projekt
    • Nun, ich habe zu prüfen, und erkannte, dass Sie geändert haben den source code von angular-ui-tpl.js, richtig?
    • das ist corect. Dies ist der Grund, warum ich habe eine bug-und pull-Anfrage an github.com/angular-ui/bootstrap/issues/3134
    • Ja, das kann ich sehen.Doch, das Thema ist geschlossen!!!

    InformationsquelleAutor FDisk
  3. 0

    Erste, Sie sollte entweder base - tag in Ihr html-Dokumente oder nicht, verwenden Sie relative urls.

    Eckig weiß nicht, über virtuelle Verzeichnisse, so dass, wenn Pfad zu deiner Website sieht aus wie mysite.com/MySite es ist eine chance, in Schwierigkeiten.

    pkozlowski.opensource schon hat man eine Antwort. Werden auch beachten Sie, dass die id der Vorlage, die anstelle von real-url, wenn Sie möchten. In diesem Fall Vorlage muss erklärt werden, wie diese:

    <script type="text/ng-template" id="TemplateId">
    ...template...
</script>
    InformationsquelleAutor Pavel Voronin
Schreibe einen Kommentar