การอ่านที่แนะนำ: คำอธิบายโดยละเอียดของกล่องโต้ตอบ Modal Modal AngularJS
$ Modal เป็นบริการที่สามารถสร้าง Windows Modal ได้อย่างรวดเร็วสร้างส่วนหนึ่งของหน้าคอนโทรลเลอร์และเชื่อมโยงพวกเขา
$ Modal มีเพียงวิธีเดียวที่เปิด (ตัวเลือก)
Templateurl: ที่อยู่ของหน้าต่างโมดัล
เทมเพลต: ใช้เพื่อแสดงแท็ก HTML
ขอบเขต: การใช้เนื้อหาที่มีขอบเขตโมดัล (อันที่จริงแล้ว $ Modal จะสร้างส่วนย่อยของขอบเขตปัจจุบัน) โดยค่าเริ่มต้นคือ $ rootscope
คอนโทรลเลอร์: คอนโทรลเลอร์ที่ระบุไว้สำหรับ $ modal เริ่มต้น $ scope ซึ่งสามารถฉีดด้วย $ modalinstance
แก้ไข: กำหนดสมาชิกและส่งผ่านไปยังคอนโทรลเลอร์ที่ระบุโดย $ modal มันเทียบเท่ากับคุณสมบัติ reslove ของเส้นทาง หากคุณต้องการผ่านวัตถุวัตถุคุณต้องใช้ Angular.copy ()
ฉากหลัง: ควบคุมพื้นหลังค่าที่อนุญาต: จริง (ค่าเริ่มต้น), เท็จ (ไม่มีพื้นหลัง), "คงที่" - พื้นหลังมีอยู่ แต่เมื่อคลิกนอกหน้าต่างโมดอลหน้าต่างโมดอลจะไม่ปิด
คีย์บอร์ด: เมื่อกด ESC ไม่ว่าจะปิดกล่องโต้ตอบโมดอลค่าเริ่มต้นเป็น ture
WindowClass: ระบุคลาสและเพิ่มลงในหน้าต่างโมดอล
วิธีการเปิดส่งคืนอินสแตนซ์แบบโมดอลซึ่งมีคุณสมบัติดังต่อไปนี้
ปิด (ผลลัพธ์): ปิดหน้าต่างโมดัลและส่งผล
ยกเลิก (เหตุผล): เลิกทำวิธีการและผ่านเหตุผล
ผลลัพธ์: สัญญาที่ผ่านเมื่อหน้าต่างโมดัลถูกปิดหรือเพิกถอน
เปิด: สัญญาตัวแปรส่งผ่านเมื่อหน้าต่างโมดอลเปิดขึ้นและโหลดเนื้อหา
นอกจากนี้ $ modalinstance ขยายสองวิธีปิด $ (ผลลัพธ์), $ ismiss (เหตุผล) ซึ่งปิดหน้าต่างได้อย่างง่ายดายและไม่จำเป็นต้องมีตัวควบคุมเพิ่มเติม
HTML
<! doctype html> <html ng-app = "modaldemo"> <head> <title> </title> <link href = "lib/bootstrap/css/bootstrap.min.css" rel = "Stylesheet"> src = "lib/bootstrap-gh-pages/ui-bootstrap-tpls -... min.js"> </script> <script src = "lib/angular/in/angular-locale_zh-cn.js"> </script> </head> id = "mymodalcontent.html"> <div> <h> ฉันเป็น modal! </h> </div> <div> <ul> <li ng-repeat = "รายการในรายการ"> <a ng-click = "selected.item = item"> {{item}} </a> </div> <div> <ปุ่ม ng-click = "ตกลง ()"> ตกลง </ปุ่ม> <ปุ่ม ng-click = "Cancel ()"> ยกเลิก </ปุ่ม> </div> </script> <button ng-click = "Open ()"> เปิดฉัน! var modaldemoctrl = function ($ scope, $ modal, $ log) {$ scope.items = ['item', 'item', 'item']; $ scope.open = function () {var modalinstance = $ modal.open ({templateurl: 'mymodalcontent.html', คอนโทรลเลอร์: modalinstancectrl, แก้ไข: {รายการ: ฟังก์ชั่น () {return $ spope.items;}}}); modalinstance.opened. แล้ว (function () {// ฟังก์ชั่นที่ดำเนินการหลังจากหน้าต่างโมดอลถูกเปิดและ console.log ('modal ถูกเปิด');}); Modalinstance.result.Then (ฟังก์ชั่น (ผลลัพธ์) {console.log (ผลลัพธ์);}, ฟังก์ชั่น (เหตุผล) {console.log (เหตุผล); // คลิกที่พื้นที่ว่างการคลิกย้อนกลับจะถูกส่งออกเสมอคลิกและฤดูร้อนจะถูกยกเลิก $ log.info - - - var modalinstancectrl = function ($ scope, $ modalinstance, รายการ) {$ scope.items = รายการ; $ scope.Selected = {item: $ scope.items []}; $ scope.ok = function () {$ modalinstance.close ($ scope.selected); - $ scope.cancel = function () {$ modalinstance.dismiss ('ยกเลิก'); - - </script> </body> </html>ด้านบนเป็นเนื้อหาที่เกี่ยวข้องของกล่องป๊อปอัพ AngularJS (รุ่น) ที่แนะนำโดยตัวแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน!