แสดงป๊อปอัปด้วยวิธีที่หรูหราที่สุด

ฉันมีแอพ AngularJS นี้ ทุกอย่างใช้ได้ดี

ตอนนี้ฉันต้องแสดงป๊อปอัปที่แตกต่างกันเมื่อเงื่อนไขเฉพาะกลายเป็นจริงและฉันสงสัยว่าอะไรจะเป็นวิธีที่ดีที่สุดในการดำเนินการต่อ

ขณะนี้ฉันกำลังประเมินสองตัวเลือก แต่ฉันเปิดรับตัวเลือกอื่นอย่างแน่นอน

ตัวเลือกที่ 1

ฉันสามารถสร้างองค์ประกอบ HTML ใหม่สำหรับป๊อปอัปและผนวกเข้ากับ DOM โดยตรงจากคอนโทรลเลอร์

สิ่งนี้จะทำลายรูปแบบการออกแบบ MVC ฉันไม่พอใจกับวิธีนี้

ตัวเลือก 2

ฉันสามารถใส่รหัสสำหรับป๊อปอัปทั้งหมดในไฟล์ HTML คงที่ได้ตลอดเวลา จากนั้นใช้ngShowฉันสามารถซ่อน / แสดงเฉพาะป๊อปอัปที่ถูกต้องเท่านั้น

ตัวเลือกนี้ไม่สามารถปรับขนาดได้จริงๆ

ดังนั้นฉันค่อนข้างมั่นใจว่าจะต้องมีวิธีที่ดีกว่าในการบรรลุสิ่งที่ฉันต้องการ

จากประสบการณ์ของฉันกับโมดัล AngularJS จนถึงตอนนี้ฉันเชื่อว่าวิธีการที่หรูหราที่สุดคือบริการเฉพาะที่เราสามารถให้เทมเพลตบางส่วน (HTML) ที่จะแสดงเป็นโมดัล

เมื่อเราคิดว่ามันเป็น modals เป็นเส้นทางของ AngularJS แต่เพิ่งปรากฏในป๊อปอัปของ modal

โครงการบู๊ตสแตรป AngularUI ( http://angular-ui.github.com/bootstrap/ ) มี$modalบริการที่ยอดเยี่ยม(เคยถูกเรียกว่า $ dialog ก่อนรุ่น 0.6.0) ซึ่งเป็นการใช้งานบริการเพื่อแสดงเนื้อหาบางส่วนเป็น ป๊อปอัพเป็นกิริยาช่วย

มันตลกเพราะฉันเรียน Angular ด้วยตัวเองและดูวิดีโอจากช่องของพวกเขาใน Youtube ผู้พูดกล่าวถึงปัญหาที่แน่นอนของคุณในวิดีโอนี้https://www.youtube.com/watch?v=ZhfUv0spHCY#t=1681รอบเครื่องหมาย 28:30 นาที

มันลงมาเพื่อวางชิ้นส่วนของรหัสนั้นในบริการแทนที่จะเป็นตัวควบคุม

ฉันเดาว่าจะฉีดองค์ประกอบป๊อปอัปใหม่เข้าไปใน DOM และจัดการแยกต่างหากแทนที่จะแสดงและซ่อนองค์ประกอบเดียวกัน วิธีนี้คุณสามารถมีป๊อปอัปได้หลายรายการ

วิดีโอทั้งหมดน่าสนใจมากที่จะดูเช่นกัน :-)

• สร้างคำสั่ง 'ป๊อปอัป' และใช้กับคอนเทนเนอร์ของเนื้อหาป๊อปอัป
• ในคำสั่งให้ตัดเนื้อหาใน div ตำแหน่งที่แน่นอนพร้อมกับ div mask ด้านล่าง
• คุณสามารถย้าย 2 divs ในแผนผัง DOM ได้ตามต้องการจากภายในคำสั่ง รหัส UI ใด ๆ ก็โอเคในคำสั่งรวมถึงรหัสเพื่อวางตำแหน่งป๊อปอัพที่กึ่งกลางหน้าจอ
• สร้างและผูกแฟล็กบูลีนกับตัวควบคุม ธงนี้จะควบคุมการมองเห็น
• สร้างตัวแปรขอบเขตที่เชื่อมโยงกับฟังก์ชัน OK / Cancel เป็นต้น

การแก้ไขเพื่อเพิ่มตัวอย่างระดับสูง (ไม่ทำงาน)

<div id='popup1-content' popup='showPopup1'>
  ....
  ....
</div>


<div id='popup2-content' popup='showPopup2'>
  ....
  ....
</div>



.directive('popup', function() {
  var p = {
      link : function(scope, iElement, iAttrs){
           //code to wrap the div (iElement) with a abs pos div (parentDiv)
          // code to add a mask layer div behind 
          // if the parent is already there, then skip adding it again.
         //use jquery ui to make it dragable etc.
          scope.watch(showPopup, function(newVal, oldVal){
               if(newVal === true){
                   $(parentDiv).show();
                 } 
              else{
                 $(parentDiv).hide();
                }
          });
      }


   }
  return p;
});

ดู http://adamalbrecht.com/2013/12/12/creating-a-simple-modal-dialog-directive-in-angular-js/ สำหรับวิธีง่ายๆในการทำกล่องโต้ตอบโมดัลกับ Angular และไม่จำเป็นต้องใช้ bootstrap

แก้ไข: ตั้งแต่ฉันใช้ ng-dialog จากhttp://likeastore.github.io/ngDialogซึ่งยืดหยุ่นได้และไม่มีการอ้างอิงใด ๆ

Angular-ui มาพร้อมกับไดอะล็อก directive ใช้มันและตั้งค่า templateurl เป็นหน้าอะไรก็ตามที่คุณต้องการรวมนั่นเป็นวิธีที่ดีที่สุดและฉันก็ใช้มันในโครงการของฉันเช่นกัน คุณสามารถส่งผ่านพารามิเตอร์อื่น ๆ สำหรับการโต้ตอบตามต้องการ