Aufrufen des modalen Fensters in der AngularJS Bootstrap-Benutzeroberfläche mithilfe von JavaScript

73

Wie kann ich anhand des hier genannten Beispiels das modale Fenster mit JavaScript aufrufen, anstatt auf eine Schaltfläche zu klicken?

Ich bin neu bei AngularJS und habe versucht, die Dokumentation hier und hier ohne Glück zu durchsuchen .

Vielen Dank

Ahmad Alfy
quelle

Antworten:

75

OK, also zuerst hat http://angular-ui.github.io/bootstrap/ eine <modal>Direktive und den $dialogDienst und beide können zum Öffnen von modalen Fenstern verwendet werden.

Der Unterschied besteht darin, dass mit der <modal>Direktive der Inhalt eines Modals in eine Hosting-Vorlage eingebettet ist (eine, die das Öffnen des Modalfensters auslöst). Der $dialogDienst ist weitaus flexibler und ermöglicht es Ihnen, den Inhalt von Modal aus einer separaten Datei zu laden sowie Modalfenster an einer beliebigen Stelle im AngularJS-Code auszulösen (dies ist ein Controller, ein Dienst oder eine andere Anweisung).

Sie sind sich nicht sicher, was Sie genau unter "Verwenden von JavaScript-Code" verstehen, aber unter der Annahme, dass Sie einen beliebigen Ort im AngularJS-Code meinen, ist der $dialogDienst wahrscheinlich ein guter Weg.

Es ist sehr einfach zu bedienen und in seiner einfachsten Form könnte man einfach schreiben:

$dialog.dialog({}).open('modalContent.html');  

Um zu veranschaulichen, dass es wirklich durch jeden JavaScript-Code ausgelöst werden kann, ist hier eine Version, die 3 Sekunden nach der Instanziierung eines Controllers mit einem Timer modal ausgelöst wird:

function DialogDemoCtrl($scope, $timeout, $dialog){
  $timeout(function(){
    $dialog.dialog({}).open('modalContent.html');  
  }, 3000);  
}

Dies kann in Aktion in diesem Plunk gesehen werden: http://plnkr.co/edit/u9HHaRlHnko492WDtmRU?p=preview

Schließlich finden Sie hier die vollständige Referenzdokumentation zu dem $dialoghier beschriebenen Dienst: https://github.com/angular-ui/bootstrap/blob/master/src/dialog/README.md

pkozlowski.opensource
quelle
1
@AhmadAlfy Ja, es gibt einige Optionen, mit denen Sie visuelle Aspekte des Modals steuern können. Aber was noch wichtiger ist, es hat viele Superkräfte und ermöglicht es Ihnen, $ -Dialoge fast wie AngularJS-Routen zu behandeln, Daten zwischen dem Hauptfenster und dem Modal (und zurück) usw. zu übergeben
pkozlowski.opensource
Ja, der Readme-Link ist auch auf der eckigen Seite unterbrochen. Ich würde diese Datei wirklich gerne lesen, aber ich kann nicht herausfinden, wo sie versteckt ist. :(
Tim Gautier
27
Scheint, als ob $ dialog durch eine umgeschriebene Version von $ modal ersetzt wurde: github.com/angular-ui/bootstrap/tree/…
Per Quested Aronsson
1
Für diejenigen, die wie ich zu Bootstrap 2.3.2 und Angular-UI-Bootstrap 0.5.0 zurück, ich denke , die aktuellen Dokumente auf dem heute nicht mehr existierenden $ Dialog hier wäre: github.com/angular-ui/bootstrap/commit /…
FÜR den
29

Damit Angular UI $ Modal mit Bootstrap 3 funktioniert, müssen Sie die Stile überschreiben

.modal {
    display: block;
}
.modal-body:before,
.modal-body:after {
    display: table;
    content: " ";
}
.modal-header:before,
.modal-header:after {
    display: table;
    content: " ";
}

(Die letzten sind erforderlich, wenn Sie benutzerdefinierte Anweisungen verwenden) und kapseln das HTML mit

<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      <h4 class="modal-title">Modal title</h4>
    </div>
    <div class="modal-body">
      ...
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      <button type="button" class="btn btn-primary">Save changes</button>
    </div>
  </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
Falke
quelle
26

Öffnen Sie modale Fenster, indem Sie Daten an den Dialog übergeben

Falls jemand Interesse hat, Daten an den Dialog zu übergeben:

app.controller('ModalCtrl', function($scope,  $modal) {
      
      $scope.name = 'theNameHasBeenPassed';

      $scope.showModal = function() {
        
        $scope.opts = {
        backdrop: true,
        backdropClick: true,
        dialogFade: false,
        keyboard: true,
        templateUrl : 'modalContent.html',
        controller : ModalInstanceCtrl,
        resolve: {} // empty storage
          };
          
        
        $scope.opts.resolve.item = function() {
            return angular.copy(
                                {name: $scope.name}
                          ); // pass name to resolve storage
        }
        
          var modalInstance = $modal.open($scope.opts);
          
          modalInstance.result.then(function(){
            //on ok button press 
          },function(){
            //on cancel button press
            console.log("Modal Closed");
          });
      };                   
})

var ModalInstanceCtrl = function($scope, $modalInstance, $modal, item) {
    
     $scope.item = item;
    
      $scope.ok = function () {
        $modalInstance.close();
      };
      
      $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
      };
}

Demo Plunker

Maxim Shoustin
quelle
Genial. Aber warum übergeben Sie in Entschlossenheit leeren Speicher und fügen dann hinzu $scope.opts.resolve.item = function()?
Anton Manevskiy
2
nur zum Lesen von Code. Sie können sicher schreiben,resolve:{ item: function(){return ..} }
Maxim Shoustin
17

Die AngularJS Bootstrap-Website wurde nicht mit der neuesten Dokumentation aktualisiert. Vor ungefähr 3 Monaten hat pkozlowski-opensource eine Änderung verfasst, um $ modal von $ dialog commit zu trennen.

https://github.com/angular-ui/bootstrap/commit/d7a48523e437b0a94615350a59be1588dbdd86bd

In diesem Commit fügte er eine neue Dokumentation für $ modal hinzu, die unten zu finden ist:

https://github.com/angular-ui/bootstrap/blob/d7a48523e437b0a94615350a59be1588dbdd86bd/src/modal/docs/readme.md .

Hoffe das hilft!

Craig Ruks
quelle
17

Schneller und schmutziger Weg!

Es ist kein guter Weg, aber für mich scheint es der einfachste zu sein.

Fügen Sie ein Ankertag hinzu, das das modale Datenziel und den Datenumschalter enthält, und weisen Sie eine ID zu. (Kann meistens überall in der HTML-Ansicht hinzugefügt werden)

<a href="" data-toggle="modal" data-target="#myModal" id="myModalShower"></a>

Jetzt,

Innerhalb des Winkelreglers, von wo aus Sie das Modal auslösen möchten, verwenden Sie einfach

angular.element('#myModalShower').trigger('click');

Dies ahmt einen Klick auf die Schaltfläche nach, basierend auf dem Winkelcode, und das Modal wird angezeigt.

Gagandeep Singh
quelle
Ist das eigentlich eine gute Praxis ? Wird dies empfohlen oder davon abgeraten? Wie kann sich dies auf diese Weise auf die Leistung auswirken? Natürlich ist das Schreiben einer Codezeile einfacher als das Schreiben einer ganzen Funktion. Aber dennoch
Saiyaff Farouk
1
Wie ich schon sagte "Es ist kein guter Weg ...", weil es nicht mit dem Design-Paradigma von Angular übereinstimmt. Ich denke, es ist aus diesem Grund entmutigt. Für den Leistungsteil - ich denke nicht, dass es einen Unterschied verursachen sollte. Aber wenn ich der Experte wäre, hätte ich diesen Abkürzungsansatz nicht befolgen sollen. Es ist nur ein schneller und schmutziger Weg, um Dinge zu erledigen. :) Sag mir doch, ob du etwas dazu findest.
Gagandeep Singh
Ich bin neu bei Angular und um mein Modal zum Laufen zu bringen, hat das in der Tat sehr gut funktioniert. Ich kann zurückkommen und es richtig machen, wenn ich erfahren habe, wie (und diese Meilensteinfrist abgelaufen ist)
VictorySaber
4

Andere Version ähnlich der von Maxim Shoustin

Ich mochte die Antwort, aber der Teil, der mich störte, war die Verwendung <script id="...">als Container für die Vorlage des Modals.

Ich wollte die Vorlage des Modals in einem versteckten Ordner platzieren <div>und den inneren HTML-Code mit einer Bereichsvariablen binden, die modal_html_template hauptsächlich deshalb aufgerufen wird, weil ich es für korrekter (und komfortabler in WebStorm / PyCharm zu verarbeiten) halte, den HTML-Code der Vorlage in a <div>anstatt in zu platzieren<script id="...">

Diese Variable wird beim Aufruf verwendet $modal({... 'template': $scope.modal_html_template, ...})

Um das innere HTML zu binden, habe ich inner-html-bindeine einfache Direktive erstellt

Schauen Sie sich das Beispiel an plunker

<div ng-controller="ModalDemoCtrl">

    <div inner-html-bind inner-html="modal_html_template" class="hidden">
        <div class="modal-header">
            <h3>I'm a modal!</h3>
        </div>
        <div class="modal-body">
            <ul>
                <li ng-repeat="item in items">
                    <a ng-click="selected.item = item">{{ item }}</a>
                </li>
            </ul>
            Selected: <b>{{ selected.item }}</b>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="ok()">OK</button>
            <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
        </div>
    </div>

    <button class="btn" ng-click="open()">Open me!</button>
    <div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>

inner-html-bind Richtlinie:

app.directive('innerHtmlBind', function() {
  return {
    restrict: 'A',
    scope: {
      inner_html: '=innerHtml'
    },
    link: function(scope, element, attrs) {
      scope.inner_html = element.html();
    }
  }
});
Jossef Harush
quelle
Die Links für die Artikel erscheinen nicht in Ihrem Plunker - leider bin ich noch ziemlich neu mit Winkel, um festzustellen, warum.
Jae