ให้ฉันบอกคุณว่า $ Modal มีวิธีการ: เปิดและคุณสมบัติของวิธีนี้ได้รับการแนะนำ:
Templateurl: ที่อยู่ของหน้าต่างโมดัล
เทมเพลต: ใช้เพื่อแสดงแท็ก HTML
ขอบเขต: การใช้เนื้อหาที่มีขอบเขตโมดัล (อันที่จริงแล้ว $ Modal จะสร้างส่วนย่อยของขอบเขตปัจจุบัน) โดยค่าเริ่มต้นคือ $ rootscope
คอนโทรลเลอร์: คอนโทรลเลอร์ที่ระบุไว้สำหรับ $ modal เริ่มต้น $ scope ซึ่งสามารถฉีดด้วย $ modalinstance
แก้ไข: กำหนดสมาชิกและส่งผ่านไปยังคอนโทรลเลอร์ที่ระบุโดย $ modal มันเทียบเท่ากับคุณสมบัติ reslove ของเส้นทาง หากคุณต้องการผ่านวัตถุวัตถุคุณต้องใช้ Angular.copy ()
ฉากหลัง: ควบคุมพื้นหลังค่าที่อนุญาต: จริง (ค่าเริ่มต้น), เท็จ (ไม่มีพื้นหลัง), "คงที่" - พื้นหลังมีอยู่ แต่เมื่อคลิกนอกหน้าต่างโมดอลหน้าต่างโมดอลจะไม่ปิด
คีย์บอร์ด: เมื่อกด ESC ไม่ว่าจะปิดกล่องโต้ตอบโมดอลค่าเริ่มต้นเป็น ture
WindowClass: ระบุคลาสและเพิ่มลงในหน้าต่างโมดอล
วิธีการเปิดส่งคืนอินสแตนซ์ด้วยคุณสมบัติต่อไปนี้:
ปิด (ผลลัพธ์): ปิดหน้าต่างโมดัลและส่งผล
ยกเลิก (เหตุผล): เลิกทำวิธีการและผ่านเหตุผล
ผลลัพธ์: สัญญาที่ผ่านเมื่อหน้าต่างโมดัลถูกปิดหรือเพิกถอน
เปิด: สัญญาตัวแปรส่งผ่านเมื่อหน้าต่างโมดอลเปิดขึ้นและโหลดเนื้อหา
นอกจากนี้ $ modalinstance ขยายสองวิธีปิด $ (ผลลัพธ์), $ ismiss (เหตุผล) ซึ่งปิดหน้าต่างได้อย่างง่ายดายและไม่จำเป็นต้องมีตัวควบคุมเพิ่มเติม
<! 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-0.7.0.min.js"> </script> <script src = "lib/angular/i18n/angular-locale_zh-cn.js"> </script> </head> type = "text/ng-template" id = "mymodalcontent.html"/> <div> <h3> ฉันเป็นโมดอล! </h3> </div> <ul> <li ng-repeat = "รายการในรายการ"> <ang-click = "selected.item = item = {}} }} </b> </div> <div> <ปุ่ม ng-click = "ตกลง ()"> ตกลง </ปุ่ม> <ปุ่ม ng-click = "ยกเลิก ()"> ยกเลิก </button> </div> </script> <button ng-click = "Open ()"> เปิดฉัน! ]); var modaldemoctrl = function ($ scope, $ modal, $ log) {$ scope.items = ['item1', 'item2', 'item3']; $ spope.open = function () {var modalinstance = $ modal.open ({templateurl: 'mymodalcont function () {return $ spope.items;}}}); modalinstance.opened. จากนั้น (ฟังก์ชั่น () {// ฟังก์ชั่นที่ดำเนินการหลังจากหน้าต่างโมดัลเปิดออกและฉากหลังจะถูกส่งออกหลังจากหน้าต่างโมดอลถูกเปิดคลิก วันที่ ());});});};}; var modalinstancectrl = function ($ scope, $ modalinstance, รายการ) {$ scope.items = รายการ; $ scope.selected = {รายการ: $ scope.items [0]}; = function () {$ modalinstance.dismiss ('ยกเลิก');};}; </script> </body> </html>ด้านบนคือรหัสตัวอย่างกล่องป๊อปอัพ AngularJS $ modal ที่แนะนำโดยตัวแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!