Dalam proses pengembangan program GUI, sering ada konsep kotak dialog modal dan kotak dialog non-modal.
Dialog Modal: Selama aktivitas antarmuka anak, jendela induk tidak dapat menanggapi pesan. Input Pengguna Eksklusif
Kotak dialog non-modal: tidak ada efek antar windows
Perbedaan utama: Kotak dialog non-modal membagikan loop pesan dengan aplikasi dan tidak akan secara eksklusif menempati pengguna.
Kotak dialog modal secara eksklusif menempati input pengguna, dan antarmuka lainnya tidak dapat merespons
Konten artikel ini
Dialog Pola Implementasi JS Angular. Berdasarkan AngularJS V1.5.3 dan Bootstrap v3.3.6.
Struktur proyek
Gambar 1 Struktur Proyek
Hasil berjalan
Gambar 1 Hasil Operasi: Mode Besar
index.html
<! Doctype html> <!-[jika lt yaitu 7]> <html> <! [Endif]-> <!-[jika yaitu 7]> <html> <! [Endif]-> <!-[jika yaitu 8]> <html> <! 8]><!--><html><!--<!--<![endif]--><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width"><title>AngularJS Modal dialog box</title><link rel = "stylesheet" href = "../ src/vendor/bootstrap/dist/css/bootstrap.css"> </head> <body ng-app = "myapp"> <!-Template modal-> <script type = "text/ng-template" id = "myangkik. </div> <div> <ul> <li ng-repeat="item in items"> <a ng-click="selected.item = item">{{item}}</a> </li> <div>Currently selected: <b>{{selected.item}}</b></div> </ul> </div> <div> <button ng-click="ok()">Confirm</button> <button ng-click="cancel()">Exit</button> </script> <div>AngularJS Modal Dialog</div> <section> <section ng-controller="modalDemo" style="margin: 40px auto; float: none; background: #fff; padding: 30px;"> <button ng-click="open('lg')">Massive Modal</button> <button ng-klik = "buka ()"> Modal </button> <button ng-click = "open ('sm')"> modal kecil </button> <hr> <v ng-show = "dipilih"> pilihan saat ini: {{{}} </div> </bagian> </bagian> <! src = "../ src/vendor/angular/angular.js"> </script> <script src = "http://cdn.bootcss.com/angular-ui-boottrap/0.11.2/ui-bootstrap-tpls.js"> </skrip> <script> <script> src = "../ src/js/mymodal.js"> </script> </body> </html>mymodal.js
/**? function (size) {var ModalInstance = $ modal.open ({TemplateUrl: 'mymodelcontent.html', controller: 'ModalInstancectrl', // Tentukan pengontrol untuk ukuran modal: ukuran, {{item ModalInstance.Result.then (function (selectedItem) {$ scope.selected = selectedItem;}, function () {$ log.info ('modal disingkirkan di:' + new date ()) {{{{{{{{{{ModalScect '); = $ scope.pelected = {item: $ scope.items [0]};Konten di atas adalah kotak dialog Modal AngularJS yang diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu semua orang!