Bacaan yang Disarankan: Penjelasan Rinci Kotak Dialog Modal AngularJS
$ Modal adalah layanan yang dapat dengan cepat membuat jendela modal, membuat bagian dari halaman, pengontrol, dan mengaitkannya.
$ modal hanya memiliki satu metode terbuka (opsi)
TemplateUrl: Alamat jendela modal
Template: Digunakan untuk menampilkan tag HTML
Lingkup: Penggunaan Konten dengan Lingkup Modal (Faktanya, $ Modal Akan Membuat Subscope dari Lingkup Saat Ini) Secara default adalah $ Rootscope
Pengontrol: Pengontrol yang ditentukan untuk $ Modal, menginisialisasi $ SCOPE, yang dapat disuntikkan dengan $ ModalInstance
Resolve: Tentukan anggota dan berikan ke pengontrol yang ditentukan oleh $ modal. Ini setara dengan properti reslove rute. Jika Anda perlu melewati objek objek, Anda perlu menggunakan Angular.Copy ()
latar belakang: Kontrol latar belakang, nilai yang diijinkan: true (default), false (tidak ada latar belakang), "statis" - latar belakang ada, tetapi saat mengklik di luar jendela modal, jendela modal tidak menutup
Keyboard: Saat ESC ditekan, apakah kotak dialog modal ditutup, default untuk ture
WindowClass: Tentukan kelas dan tambahkan ke jendela modal
Metode terbuka mengembalikan instance modal, yang memiliki sifat berikut
tutup (hasil): tutup jendela modal dan lulus hasil
singkirkan (alasan): Batalkan metode modal dan lulus alasan
Hasil: Kontrak yang dilewatkan saat jendela modal ditutup atau dicabut
Terbuka: Kontrak, Variabel yang Dikirim Saat Jendela Modal Terbuka dan Konten dimuat
Selain itu, $ ModalInstance memperluas dua metode $ tutup (hasil), $ smiss (alasan), yang dengan mudah menutup jendela dan tidak memerlukan pengontrol tambahan
Html
<!DOCTYPE html> <html ng-app="ModalDemo"> <head> <title></title> <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <script src="lib/angular/angular.min.js"></script> <script src = "lib/bootstrap-gh-halaman/ui-bootstrap-tpls -... min.js"> </script> <script src = "lib/angular/in/angular-locale_zh-cn.js"> </script> </adah "<div ng ng-controller =" Models "</script> </head> <diver> <Div ng-controller =" " id = "mymodalcontent.html"> <verv> <h> Saya modal! </h> </div> <viv> <ul> <li ng-repeat = "item dalam item"> <a ng-klik = "oDem = {{{{} {} {{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{/{ </div> <div> <tombol ng-click = "ok ()"> ok </button> <button ng-click = "cancel ()"> Batal </button> </div> </script> <button ng-click = "open ()"> buka saya! </buttpon> </vect> <skrip> var modaldemo = angular.module ('; var modaldemoctrl = fungsi ($ scope, $ modal, $ log) {$ scope.items = ['item', 'item', 'item']; $ scope.open = function () {var modalInstance = $ modal.open ({templateUrl: 'mymodalcontent.html', controller: modalinstancectrl, selesaikan: {item: function () {return $ scope.items;}}}); ModalInstance.opened.then (function () {// Fungsi dieksekusi setelah jendela modal dibuka dan console.log ('modal dibuka');}); ModalInstance.result.then (function (hasil) {console.log (hasil);}, fungsi (alasan) {console.log (alasan); // klik pada area kosong, klik latar akan selalu output. Klik Batal, dan musim panas akan dibatalkan $ LOG.Info ('Modal yang diberhentikan di:' + Tanggal baru () (); }); }; }; var modalinstancectrl = fungsi ($ scope, $ modalInstance, item) {$ scope.items = item; $ scope.selected = {item: $ scope.items []}; $ scope.ok = function () {$ ModalInstance.close ($ scope.pelected); }; $ scope.cancel = function () {$ ModalInstance.dismiss ('batal'); }; }; </script> </body> </html>Di atas adalah konten yang relevan dari kotak mode pop-up AngularJS (model) yang diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu semua orang!