Antworten:
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
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">×</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 -->
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
$scope.opts.resolve.item = function()?
resolve:{ item: function(){return ..} }
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:
Hoffe das hilft!
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.
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();
}
}
});