Tampilkan munculan dengan cara yang paling elegan

Saya punya aplikasi AngularJS ini. Semuanya bekerja dengan baik.

Sekarang saya perlu menunjukkan pop-up yang berbeda ketika kondisi tertentu menjadi kenyataan, dan saya bertanya-tanya apa yang akan menjadi cara terbaik untuk melanjutkan.

Saat ini saya sedang mengevaluasi dua opsi, tetapi saya benar-benar terbuka untuk opsi lain.

Pilihan 1

Saya bisa membuat elemen HTML baru untuk pop-up, dan menambahkan ke DOM langsung dari controller.

Ini akan mematahkan pola desain MVC. Saya tidak senang dengan solusi ini.

pilihan 2

Saya selalu bisa memasukkan kode untuk semua pop-up di file HTML statis. Kemudian, menggunakan ngShow, saya bisa menyembunyikan / hanya menampilkan pop-up yang benar.

Opsi ini tidak benar-benar dapat diskalakan.

Jadi saya cukup yakin harus ada cara yang lebih baik untuk mencapai apa yang saya inginkan.

Berdasarkan pengalaman saya dengan AngularJS modals sejauh ini saya percaya bahwa pendekatan yang paling elegan adalah layanan khusus yang kami dapat menyediakan template parsial (HTML) untuk ditampilkan dalam modal.

Ketika kita memikirkannya, modals adalah jenis rute AngularJS tetapi hanya ditampilkan dalam modal popup.

Proyek bootstrap AngularUI ( http://angular-ui.github.com/bootstrap/ ) memiliki layanan yang sangat baik $modal(dulu disebut $ dialog sebelum versi 0.6.0) yang merupakan implementasi layanan untuk menampilkan konten parsial sebagai popup modal.

Ini lucu karena saya belajar Angular sendiri dan menonton beberapa video dari saluran mereka di Youtube. Pembicara menyebutkan masalah sebenarnya Anda dalam video ini https://www.youtube.com/watch?v=ZhfUv0spHCY#t=1681 sekitar tanda 28:30 menit.

Itu datang untuk menempatkan potongan kode tertentu dalam layanan daripada pengontrol.

Dugaan saya adalah menyuntikkan elemen popup baru ke DOM dan menanganinya terpisah alih-alih menunjukkan dan menyembunyikan elemen yang sama. Dengan cara ini Anda dapat memiliki beberapa sembulan.

Seluruh video juga sangat menarik untuk ditonton :-)

• Buat arahan 'popup' dan terapkan pada wadah konten popup
• Dalam arahan, bungkus konten dalam posisi absolut bersama dengan mask di bawahnya.
• Tidak masalah untuk memindahkan 2 div di pohon DOM sesuai kebutuhan dari dalam arahan. Kode UI apa pun boleh dalam arahan, termasuk kode untuk menempatkan popup di tengah layar.
• Buat dan ikat bendera boolean ke pengontrol. Bendera ini akan mengontrol visibilitas.
• Buat variabel lingkup yang terkait dengan fungsi OK / Batalkan dll.

Mengedit untuk menambahkan contoh tingkat tinggi (tidak fungsional)

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

Lihat http://adamalbrecht.com/2013/12/12/creating-a-simple-modal-dialog-directive-in-angular-js/ untuk cara sederhana melakukan dialog modal dengan Angular dan tanpa perlu bootstrap

Sunting: Saya sejak itu menggunakan ng-dialog dari http://likeastore.github.io/ngDialog yang fleksibel dan tidak memiliki dependensi.

Angular-ui hadir dengan direktif dialog. Gunakan dan atur templateurl ke halaman apa pun yang ingin Anda sertakan. Itu adalah cara yang paling elegan dan saya telah menggunakannya dalam proyek saya juga. Anda dapat melewati beberapa parameter lain untuk dialog sesuai kebutuhan.