Angular-UI -, Modal -, inline-template und controller

Möchte ich eine wirklich einfache Bestätigung-box mit UI-modal, die ich erfolgreich verwendet, um komplizierte modals, die laden Ihre Vorlage und Steuerung von externen Dateien in der Vergangenheit.

Es ist so einfach, aber ich will nicht zu verlassen Sie sich auf externe template-und controller-Dateien, nur eine einfache box mit schließen-Schaltfläche, die ist irgendwie verdrahtet an einen controller direkt deklariert auf den modal-Instanz.

Hier ist, was ich erfolglos versucht haben...

var modalInstance = $modal.open({
    template: "<div>Message goes here...<button ng-click='cancel()'>Continue</button></div>",
    controller: function(){

        $scope.cancel = function(){
            alert("Cancelled");
        };

    }
});
InformationsquelleAutor jonhobbs | 2014-04-03
  1. 7

    Sieht aus wie Sie benötigen, um zu injizieren, $scope in den controller-Funktion

    controller: function($scope){

    Rahmen des modal-Vorlage ist nicht das gleiche wie der Umfang der Steuerung, die Sie definiert haben, den modal-Instanz in.

    Deshalb sind Sie nicht immer Undefinierte Fehler ist $scope ist eine closure-variable hinzufügen .Abbrechen (), um es funktioniert Prima. Aber, da es nicht den gleichen Geltungsbereich des modal, so dass die ng-klicken Sie nicht sehen .cancel() an seinem Umfang.

    Repliziert ich in diesem jsbin: http://jsbin.com/gejuxije/1/edit

    Edit:
    Da Sie erwähnten Sie nicht wollen, dass externe Dateien für ein template, hier ist eine demo von, wie definieren Sie die Vorlage für den modal-innen die Vorlage für die Ansicht genutzt werden.

    http://jsbin.com/gejuxije/2/edit

    Können Sie html innerhalb eines inline-Skript...

    <script type="text/ng-template" id="myModalTemplateName.html"></script>
    • Sehr umfassende Antwort. Danke.
    • Ich wünschte, ich könnte upvote dies ein Dutzend mal. Alle anderen modal-Beispiele, die ich gefunden habe gemacht, es sieht aus wie Sie hatten, um eine benutzerdefinierte Steuerung für jede modal. Es ist schön zu zeigen, dass Sie tun können diese inline.
    InformationsquelleAutor JeremyWeir
  2. 2

    Den Wert, den Sie passieren zu 'template' werden muss Gültiger HTML-Code, und sollte im Idealfall enthalten die entsprechenden modal-CSS-Klassen.

    Müssen Sie möglicherweise auch: in den Bereich für den controller.

    var modalInstance = $modal.open({
    scope:$scope,
    template: "<div>Message goes here...<button ng-click='cancel()'>Continue</button></div>",
    controller: function(){
        $scope.cancel = function(){
            alert("Cancelled");
        };
    }
});

    Im Allgemeinen habe ich nicht zu tun hatte, aber seit Sie bei der Definition der controller in der open-Methode kann es notwendig sein. Laut docs sollte es einen neuen Bereich erstellen als Kind rootScope, aber ich vermute, Ihre Laufleistung ist unterschiedlich. Ich Wünsche den Anweisungen auf der website waren ein wenig mehr informativ zu diesem Thema.

    Können Sie auch wollen, um zu versuchen, $schließen und $entlassen. Ich habe nie versucht Sie, aber da Sie nicht mit Glück mit der scope-variable, diese ist es vielleicht, was Sie brauchen.

    • Sorry, ich nahm ein wenig von HTML aus, um es zu vereinfachen. Hab ich wickelte es in ein div-Element jetzt. Nicht sicher über Ihre zweite Punkt, Wenn ich eine externe HTML-Datei für die Vorlage, die ich nicht haben, um spezielle Klassen, die in meinem HTML -, weil AngularUI wickelt es in seine eigene Vorlage.
    • Wenn ich eine statische Vorlage, die ich wickeln Sie das ganze in eine Reihe von divs, die die modale Klassen: modalouter, modal-header -, modal-body und/oder der modal-footer. Ich weiß, die docs sagen Sie nicht, dies zu tun, aber Sie auch nicht sagen, es Nicht zu tun. Meine Ergebnisse waren ausgezeichnet, praktikable modals, jedes mal.
    • Meine modal ist die Darstellung absolut in Ordnung, obwohl es nur die Abbrechen-Schaltfläche, die nicht funktioniert, weil es nicht scheinen so verdrahtet werden, dass die Abbrechen-Funktion im controller.
    • Oh, wie ich sehe. Haben Sie versucht, die übergabe in einem Bereich?
    • Sorry, nicht sicher, was Sie meinen. übergeben Sie einen Bereich in dem controller? Was wäre auf den Rahmen?
    InformationsquelleAutor MBielski
  3. 1

    Ich versuche gerade, etwas ähnliches zu tun und stolperte über diese. Ich weiß, es ist alt, aber es könnte jemand helfen.

    Einfach ausgedrückt 

    modalInstance.close();

    in der cancel-Funktion

    InformationsquelleAutor Troy Wray
Schreibe einen Kommentar