Pop-upları ən zərif şəkildə göstərin.

Bir AngularJS tətbiqim var. Hər şey yaxşı işləyir.

İndi xüsusi şərtlər doğru olanda fərqli pop-upları göstərmək məcburiyyətindəyəm və ən yaxşı şəkildə nə olacağını merak etdim.

Hal-hazırda iki variant qiymətləndirirəm, amma tamamilə digər variantlara açıqdır.


Seçim 1

Popup üçün yeni bir HTML elementi yarada və DOM-a nəzarətçidən birbaşa əlavə edə bilərəm.

Bu MVC dizayn modelini pozacaq. Bu qərardan məmnun deyiləm.


Seçim 2

Statik bir HTML faylında bütün pop-up pəncərələr üçün həmişə kod əlavə edə bilərəm. Sonra, ngShow istifadə edərək, yalnız doğru popup penceresini gizleyebilir / göstərə bilərəm.

Bu parametr ölçeklenebilir deyil.


Beləliklə, mən istədiyimə nail olmaq üçün daha yaxşı bir yol olmalıdır.

172
04 апр. Bruno 04 apr tərəfindən təyin . 2013-04-04 16:10 '13 'da 16:10' da 2013-04-04 16:10
@ 5 cavab

AngularJS modları ilə bağlı təcrübəmə əsasən, mən ən zərif yanaşma modal formatda nümayiş olunacaq qismən (HTML) şablon təmin edə biləcəyimiz xüsusi xidmətdir.

Bununla əlaqədar düşünsək, modallar AngularJS marşrutlarıdır, lakin sadəcə modal açılan pəncərədə göstərilir.

AngularUI bootstrap layihəsi ( http://angular-ui.github.com/bootstrap/ ) əla xidmət $modal modalına (adətən $ 0.6.0 versiyasına qədər dialoq deyilir), qismən məzmunu modal bir popup kimi göstərmək üçün xidmət tətbiqidir. .

87
04 апр. Cavab pkozlowski.opensource tərəfindən verilir 04 Aprel. 2013-04-04 17:20 '13 at 17:20 2013-04-04 17:20

Bu məntiqsizdir, çünki mən özüm öyrənirəm və YouTube-da öz kanallarından videoları seyr edirəm. Bir natiq bu videoda dəqiq probleminizi https://www.youtube.com/watch?v=ZhfUv0spHCY#t=1681 ətrafında 28:30 dəqiqə qeyd edəcək.

Bu, bu kod parçasının xidmətdə istifadə edildiyini və nəzarətçidə deyil, gerçəkləşir.

border=0

Mənim tahminim, DOM-a yeni popup elementləri təqdim etmək və eyni elementi göstərmək və gizlətmək əvəzinə ayrı-ayrılıqda işləməkdir. Bu şəkildə birdən çox popupa sahib ola bilərsiniz.

Bütün video görmək çox maraqlıdır: -)

28
04 апр. Cavab Bart 04 apr verilir . 2013-04-04 16:25 '13 'da 16:25' da 2013-04-04 16:25
  • Popup bir direktiv yaradın və onu popup konteynerinə tətbiq edin.
  • Bir direktivdə, məzmunu aşağıda div maskası ilə mütləq div mövqeyində saxlaya bilərsiniz.
  • Bir direktivdən lazım olan kimi DOM ağacında 2 divs hərəkət etmək hüququ var. Direktivlərdə hər hansı bir istifadəçi interfeysi kodu ekranın mərkəzində bir popup yerləşdirmək üçün kod daxildir.
  • Mantıksal bir bayrağı yaradın və nəzarətçiyə bağlayın. Bu bayraq görünürlüğünü nəzarət edəcək.
  • OK / Ləğv funksiyalarını və s. Bağlayan dəyişən sahələr yaradın.

Yüksək səviyyəli bir nümunə əlavə etmək üçün redaktə (funksional deyil)

 <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; }); 
14
04 апр. Cavab Ketan 04 apr verilir . 2013-04-04 17:48 '13 at 05:48 PM 2013-04-04 17:48

Angular ilə modal dialoq etmək və download ehtiyac olmadan sadə bir yol üçün http://adamalbrecht.com/2013/12/12/creating-a-simple-modal-dialog-directive-in-angular-js/ səhifəsinə baxın.

Düzəlişlər: Mən indiyədək, http://likeastore.github.io/ngDialog-dan ng-dialoqdan istifadə etmişəm, bu da çevik və heç bir asılılıq yoxdur.

13
13 февр. Nik Dow 13 fevralda bir cavab verdi 2014-02-13 10:20 '14 saat 10:20 'da 2014-02-13 10:20

Açısal - bir dialoq direktivi ilə gəlir. Istifadə etmək istədiyiniz hər hansı bir səhifədə istifadə edin və templateurl qurun. Bu ən zərif bir yoldur və mən bunu layihəmdə istifadə edirəm. Lazım olduğu kimi bir neçə digər parametrləri dialoqa keçə bilərsiniz.

7
11 апр. cavab user2203937 11 apr tərəfindən verilir . 2013-04-11 23:15 '13 saat 11:15 'da 2013-04-11 23:15

etiketləri ilə bağlı digər suallar və ya bir sual