Hiển thị cửa sổ bật lên một cách thanh lịch nhất

Tôi có ứng dụng AngularJS này. Tất cả mọi thứ hoạt động tốt.

Bây giờ tôi cần hiển thị các cửa sổ bật lên khác nhau khi điều kiện cụ thể trở thành sự thật và tôi đã tự hỏi điều gì sẽ là cách tốt nhất để tiến hành.

Hiện tại tôi đang đánh giá hai tùy chọn, nhưng tôi hoàn toàn mở cho các tùy chọn khác.

lựa chọn 1

Tôi có thể tạo phần tử HTML mới cho cửa sổ bật lên và thêm vào DOM trực tiếp từ bộ điều khiển.

Điều này sẽ phá vỡ mẫu thiết kế MVC. Tôi không hài lòng với giải pháp này.

Lựa chọn 2

Tôi luôn có thể chèn mã cho tất cả các cửa sổ bật lên trong tệp HTML tĩnh. Sau đó, bằng cách sử dụng ngShow, tôi chỉ có thể ẩn / hiển thị đúng cửa sổ bật lên.

Tùy chọn này không thực sự có khả năng mở rộng.

Vì vậy, tôi khá chắc chắn rằng phải có một cách tốt hơn để đạt được những gì tôi muốn.

Dựa trên kinh nghiệm của tôi với các phương thức AngularJS cho đến nay tôi tin rằng cách tiếp cận thanh lịch nhất là một dịch vụ dành riêng mà chúng tôi có thể cung cấp một mẫu (HTML) được hiển thị theo phương thức.

Khi chúng tôi nghĩ về nó, các phương thức là loại tuyến AngularJS nhưng chỉ hiển thị trong cửa sổ bật lên phương thức.

Dự án bootstrap AngularUI ( http://angular-ui.github.com/bootstrap/ ) có một $modaldịch vụ tuyệt vời (được gọi là hộp thoại $ trước phiên bản 0.6.0) là triển khai dịch vụ để hiển thị nội dung một phần như một cửa sổ bật lên phương thức.

Thật buồn cười vì tôi đang tự học Angular và đang xem một số video từ kênh của họ trên Youtube. Diễn giả đề cập đến vấn đề chính xác của bạn trong video này https://www.youtube.com/watch?v=ZhfUv0spHCY#t=1681 vào khoảng 28:30 phút.

Nó đặt xuống để đặt đoạn mã cụ thể đó vào một dịch vụ thay vì bộ điều khiển.

Tôi đoán sẽ tiêm các phần tử bật lên mới vào DOM và xử lý chúng riêng rẽ thay vì hiển thị và ẩn phần tử tương tự. Bằng cách này bạn có thể có nhiều cửa sổ bật lên.

Toàn bộ video cũng rất thú vị để xem :-)

• Tạo một lệnh 'cửa sổ bật lên' và áp dụng nó vào vùng chứa nội dung cửa sổ bật lên
• Trong chỉ thị, bọc nội dung ở vị trí div tuyệt đối cùng với div mặt nạ bên dưới nó.
• Bạn có thể di chuyển 2 div trong cây DOM khi cần trong lệnh. Bất kỳ mã UI nào cũng được chấp nhận trong các chỉ thị, bao gồm cả mã để định vị cửa sổ bật lên ở giữa màn hình.
• Tạo và liên kết một cờ boolean để điều khiển. Cờ này sẽ kiểm soát tầm nhìn.
• Tạo các biến phạm vi liên kết với các hàm OK / Hủy, v.v.

Chỉnh sửa để thêm một ví dụ cấp cao (không chức năng)

<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;
});

Xem http://adamalbrecht.com/2013/12/12/creating-a-simple-modal-dialog-directive-in-angular-js/ để biết cách đơn giản thực hiện hộp thoại phương thức với Angular và không cần bootstrap

Chỉnh sửa: Tôi đã sử dụng hộp thoại ng từ http://likeastore.github.io/ngDialog , tính linh hoạt và không có bất kỳ phụ thuộc nào.

Angular-ui đi kèm với chỉ thị hộp thoại. Sử dụng nó và đặt templateurl vào bất kỳ trang nào bạn muốn đưa vào. Đó là cách thanh lịch nhất và tôi cũng đã sử dụng nó trong dự án của mình. Bạn có thể truyền một số tham số khác cho hộp thoại theo nhu cầu.