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


178

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.


sayısız yol, html için denetleyici kesinlikle iyi bir yol değil, UI Bootstrap Modal'a bakın angular-ui.github.com/bootstrap/#/modal
charlietfl

1
AngularJS dokümanları, ' Dışlama ve Kapsamları Anlama ' bölümünde açılır pencereleri nasıl yöneteceğinizi biraz açıklar . Bu yardımcı olur umarım.
Ivan Ferrer Villa

Gerçekten pop- up'larla ölçeklendirmek istiyorsanız popscript'e göz atın .
Raj Nathani

Yanıtlar:


88

Ş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.


10
$ dialog şimdi modal $
Sangram Singh

1
@ pkozlowski.opensource ui-bootstrap'ın yaklaşımını seviyorum, ancak modal ile içerik yazamıyorum. Biraz araştırdım ve diğer insanların da bu sorunu yaşadığını gördüm.
jusopi


Sadece, bir hizmetin DOM'a erişmemesi gerekir. Bunun için bir yönerge yer almaktadır.
superluminary

1
@superluminary bu gerçekten takip etmek için iyi bir genel kuraldır, ancak belirli bir kuralın neden hızda olduğunu bilmek ve böyle bir kuralın ne zaman kırılabileceğini (hatta hatta!) anlamak da tanrıdır . Modals / tooltips ve benzerlerinin kurala istisna olduğuna inanıyorum. Kısacası: kuralların bilinmesi, aynı zamanda bunların geçerli / geçerli olmadığı bağlamın da anlaşılması gerekir.
pkozlowski.opensource

29

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ç :-)


2
Misko açısal tohum! (bwa haha). Cidden tho. Sözlerini açısal için kesin kaynak olarak gör.
güverte

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

'watch' yerine $ watch. ayrıca 'showPopup' yerine 'pop-up' olmamalı scope.watch(showPopup, function(newVal, oldVal){mı?
Sangram Singh

14

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 .


1
Sadece bu yaklaşımla hızlı bir sprint yaptım, ancak bunun tek bir pop-up / modal yaklaşım için harika olduğunu fark ettim, ancak bu özel UX'i düşünün: Bir müşterinin bir ürün sipariş ettiğini ve kullanıcı arayüzünün bir onay siparişi pop-up'ı sunduğunu söyleyin (bu yüzden 've' işgal edilmiş 'Adam'ın pop-up içeriği). Şimdi gönder veya satın al'ı veya bu açılır pencereden herhangi bir şeyi tıklıyoruz ve kullanıcının bir önceki ekranda bu siparişi değiştirmesi gereken bir hata var. Bu hatayı başka bir açılır pencerede en üst düzeyde görüntülemek istiyorum. Bu yaklaşım bunu kolaylaştırmıyor inanmıyorum.
jusopi

3
Doğru ama bence birden fazla pop-up kötü bir kullanıcı arayüzü olabilir.
Nik Dow

iyi eklenti aradığım cevap!
Andres Felipe

7

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.


5
angular-bootstrap 0.6 ve sonrasında $ iletişim kutusu $ modal ile değiştirildi. Bu, kullanım dışı kaldığı için $ iletişim kutusunu kullanan tüm kodu değiştirmeniz ve $ modal ile yazmanız gerektiği anlamına gelir
Mohammad Umair Khan
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.