Pop-up'ları en zarif şekilde göster

Bu AngularJS uygulaması var. Her şey yolunda gidiyor.

Şimdi belirli koşullar gerçekleştiğinde farklı pop-up'lar göstermem gerekiyor ve ilerlemenin en iyi yolunun ne olacağını merak ediyordum.

Şu anda iki seçeneği değerlendiriyorum, ama kesinlikle diğer seçeneklere açıkım.

seçenek 1

Açılır pencere için yeni HTML öğesi oluşturabilir ve doğrudan denetleyiciden DOM'ye ekleyebilirim.

Bu MVC tasarım modelini kıracaktır. Bu çözümden memnun değilim.

seçenek 2

Statik HTML dosyasındaki tüm pop-up'ların kodunu her zaman ekleyebilirim. Sonra kullanarak ngShow, sadece doğru açılır pencereyi gizleyebilir / gösterebilirim.

Bu seçenek gerçekten ölçeklenebilir değildir.

Bu yüzden istediğimi başarmanın daha iyi bir yolu olması gerektiğinden eminim.

Şimdiye kadar AngularJS modals ile olan tecrübelerime dayanarak, en zarif yaklaşımın bir kipte görüntülenmesi için kısmi (HTML) bir şablon sağlayabileceğimiz özel bir hizmet olduğuna inanıyorum.

Bunu düşündüğümüzde, modals AngularJS rotalarıdır, ancak sadece modal açılır pencerede görüntülenir.

AngularUI önyükleme projesi ( http://angular-ui.github.com/bootstrap/ ), $modalkısmi içeriğini şu şekilde görüntüleyen bir hizmetin uygulaması olan mükemmel bir hizmete (0.6.0 sürümünden önce $ iletişim kutusu olarak adlandırılır) sahiptir. kalıcı bir açılır pencere.

Komik çünkü Angular'ı kendim öğreniyorum ve Youtube'daki kanallarından bazı videolar izliyordum. Konuşmacı, bu videodaki tam sorununuzu, https://www.youtube.com/watch?v=ZhfUv0spHCY#t=1681 , 28:30 dakika işaretinden bahseder.

Söz konusu kod parçasını bir kontrolör yerine bir servise yerleştirmek söz konusudur.

Benim tahminim DOM'a yeni pop-up öğeleri enjekte etmek ve aynı öğeyi göstermek ve gizlemek yerine bunları ayrı işlemek olacaktır. Bu şekilde birden fazla pop-up'ınız olabilir.

Tüm videoyu izlemek de çok ilginç :-)

• Bir "pop-up" yönergesi oluşturun ve pop-up içeriğin kapsayıcısına uygulayın
• Direktifte, içeriği altındaki maske div ile birlikte mutlak bir konum div'de sarın.
• DOM ağacındaki 2 div öğesini gerektiği gibi yönerge içinden taşımak iyidir. Açılır pencereyi ekranın ortasına yerleştirme kodu da dahil olmak üzere, yönergelere ilişkin tüm UI kodları TAMAM.
• Boole bayrağı oluşturun ve denetleyiciye bağlayın. Bu bayrak görünürlüğü kontrol eder.
• Tamam / İptal işlevlerine vb. Bağlanan kapsam değişkenleri oluşturun.

Üst düzey bir örnek eklemek için düzenleme (işlevsel değil)

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

Bkz http://adamalbrecht.com/2013/12/12/creating-a-simple-modal-dialog-directive-in-angular-js/ açısal ile kalıcı iletişim yapmanın basit bir yolu ve gerek bootstrap olmadan

Düzenleme: O zamandan beri esnek ve bağımlılıkları olmayan http://likeastore.github.io/ngDialog ng-dialog kullanıyorum .

Açısal-ui iletişim yönergesi ile birlikte gelir ve templateurl'yi dahil etmek istediğiniz sayfaya ayarlayın.En zarif yol budur ve projemde de kullandım. İletişim için ihtiyaca göre diğer birkaç parametreyi iletebilirsiniz.