Wywołanie okna modalnego w interfejsie Bootstrap AngularJS przy użyciu JavaScript
Używając przykładu tutaj , Jak mogę wywołać okno modalne używając JavaScript zamiast klikania przycisku?
Jestem nowy w AngularJS i próbowałem przeszukać dokumentację tutaj i tutaj bez powodzenia.
Thanks
6 answers
OK, więc po pierwsze http://angular-ui.github.io/bootstrap/ posiada dyrektywę <modal>
oraz usługę $dialog
i obie te mogą być użyte do otwierania okien modalnych.
Różnica polega na tym, że w przypadku dyrektywy <modal>
Zawartość modalu jest osadzona w szablonie hostingu (wywołującym otwarcie okna modalnego). Usługa $dialog
jest znacznie bardziej elastyczna i umożliwia ładowanie zawartości modalnej z osobnego pliku, a także wyzwalanie okien modalnych z dowolnego miejsca w kodzie AngularJS (jest to kontroler, usługa lub inna dyrektywa).
Nie jestem pewien, co dokładnie rozumiesz przez "używanie kodu JavaScript", ale zakładając, że masz na myśli dowolne miejsce w kodzie AngularJS, usługa $dialog
jest prawdopodobnie dobrym rozwiązaniem.
Jest bardzo łatwy w użyciu i w najprostszej formie można po prostu napisać:
$dialog.dialog({}).open('modalContent.html');
Aby zilustrować, że może być naprawdę wyzwalany przez dowolny kod JavaScript tutaj jest wersja, która wyzwala modal z timerem, 3 sekundy po kontroler był instancja:
function DialogDemoCtrl($scope, $timeout, $dialog){
$timeout(function(){
$dialog.dialog({}).open('modalContent.html');
}, 3000);
}
To można zobaczyć w akcji w tym plunk: http://plnkr.co/edit/u9HHaRlHnko492WDtmRU?p=preview
Na koniec pełna dokumentacja referencyjna do opisanej tutaj usługi $dialog
:
https://github.com/angular-ui/bootstrap/blob/master/src/dialog/README.md
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-04-28 18:20:48
Aby angular ui $ modal działało z bootstrap 3 musisz nadpisać style
.modal {
display: block;
}
.modal-body:before,
.modal-body:after {
display: table;
content: " ";
}
.modal-header:before,
.modal-header:after {
display: table;
content: " ";
}
(ostatnie są konieczne, jeśli używasz własnych dyrektyw) i enkapsulują html za pomocą
<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 -->
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-09-11 11:04:43
Otwieranie okien modalnych z przekazywaniem danych do okna dialogowego
W przypadku, gdy ktoś jest zainteresowany przekazaniem danych do okna dialogowego:
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
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-03-13 20:09:16
Strona AngularJS Bootstrap nie została zaktualizowana o najnowszą dokumentację. Około 3 miesięcy temu pkozlowski-opensource napisał zmianę oddzielającą $modal od $ dialog commit poniżej:
Https://github.com/angular-ui/bootstrap/commit/d7a48523e437b0a94615350a59be1588dbdd86bd{[4]
W tym commicie dodał nową dokumentację dla $modal, którą można znaleźć poniżej:
Mam nadzieję, że to pomoże!
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-08-27 19:39:36
Szybki i brudny sposób!
To nie jest dobry sposób, ale dla mnie wydaje się najprostszy.Dodaj znacznik zakotwiczenia, który zawiera modalne data-target i data-toggle, mają powiązany z nim identyfikator. (Można dodawać głównie w dowolnym miejscu w widoku html)
<a href="" data-toggle="modal" data-target="#myModal" id="myModalShower"></a>
Teraz,
Wewnątrz kontrolera kątowego, skąd chcesz uruchomić modal wystarczy użyć
angular.element('#myModalShower').trigger('click');
To naśladuje kliknięcie przycisku na podstawie kodu kątowego i pojawi się modal.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-10-14 17:00:03
Inna wersja podobna do tej oferowanej przez Maxima Shoustina
Spodobała mi się odpowiedź, ale część, która mnie niepokoiła, to użycie <script id="...">
jako kontenera dla szablonu modalu.
Chciałem umieścić szablon modala w ukrytym <div>
i powiązać wewnętrzny html ze zmienną scope o nazwie modal_html_template
głównie dlatego, że moim zdaniem poprawniejsze (i wygodniejsze do przetworzenia w Webstorm/PyCharm) jest umieszczenie HTML szablonu wewnątrz <div>
zamiast <script id="...">
To zmienna zostanie użyta podczas wywołania $modal({... 'template': $scope.modal_html_template, ...})
Aby związać wewnętrzny html, stworzyłem inner-html-bind
, która jest prostą dyrektywą
Zobacz przykład 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
dyrektywa:
app.directive('innerHtmlBind', function() {
return {
restrict: 'A',
scope: {
inner_html: '=innerHtml'
},
link: function(scope, element, attrs) {
scope.inner_html = element.html();
}
}
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-05-30 16:14:24