सबसे सुरुचिपूर्ण तरीके से पॉप-अप दिखाएं

178

मेरे पास यह AngularJS ऐप है। सब कुछ ठीक काम करता है।

अब मुझे अलग-अलग पॉप-अप दिखाने की जरूरत है जब विशिष्ट परिस्थितियां सच हो जाती हैं, और मैं सोच रहा था कि आगे बढ़ने का सबसे अच्छा तरीका क्या होगा।

वर्तमान में मैं दो विकल्पों का मूल्यांकन कर रहा हूं, लेकिन मैं अन्य विकल्पों के लिए बिल्कुल खुला हूं।

विकल्प 1

मैं पॉप-अप के लिए नया HTML एलिमेंट बना सकता हूं, और कंट्रोलर से सीधे DOM में अपीयर कर सकता हूं।

यह एमवीसी डिजाइन पैटर्न को तोड़ देगा। मैं इस समाधान से खुश नहीं हूं।

विकल्प 2

मैं हमेशा स्थिर HTML फ़ाइल में सभी पॉप-अप के लिए कोड सम्मिलित कर सकता हूं। फिर, उपयोग करते हुए ngShow, मैं केवल सही पॉप-अप छिपा / दिखा सकता हूं।

यह विकल्प वास्तव में स्केलेबल नहीं है।

इसलिए मुझे पूरा यकीन है कि जो मैं चाहता हूं उसे हासिल करने का एक बेहतर तरीका होना चाहिए।

— ब्रूनो
स्रोत

कई तरीके, HTML के लिए नियंत्रक अच्छा तरीका नहीं है, यूआई बूटस्ट्रैप मोडल कोणीय-ui.github.com/bootstrap/#/modal

— charlietfl

1

AngularJS के डॉक्स ' अंडरस्टैंडिंग ट्रांसकॉर्पशन एंड स्कोप्स ' सेक्शन के तहत पॉपअप को मैनेज करने का तरीका थोड़ा समझाते हैं । उम्मीद है की यह मदद करेगा।

— इवान फेरर विला

यदि आप वास्तव में पॉपअप के साथ स्केल करना चाहते हैं तो पॉपस्क्रिप्ट को देखें ।

— राज नाथानी

88

अब तक के AngularJS मॉडल्स के साथ अपने अनुभव के आधार पर, मेरा मानना है कि सबसे सुरुचिपूर्ण दृष्टिकोण एक समर्पित सेवा है, जिसे हम एक आंशिक (HTML) टेम्पलेट प्रदान कर सकते हैं, जिसे एक मोडल में प्रदर्शित किया जा सकता है।

जब हम इसके बारे में सोचते हैं तो मॉडल एक प्रकार के अंगुलरजेएस मार्ग होते हैं, लेकिन बस मोडल पॉपअप में प्रदर्शित होते हैं।

AngularUI बूटस्ट्रैप प्रोजेक्ट ( http://angular-ui.github.com/bootstrap/ ) में एक उत्कृष्ट $modalसेवा है (जिसका उपयोग संस्करण 0.6.0 से पहले $ डायलॉग कहा जाता है) जो आंशिक रूप से सामग्री प्रदर्शित करने के लिए एक सेवा का कार्यान्वयन है एक मोडल पॉपअप।

— pkozlowski.opensource
स्रोत

10

$ संवाद अब $ modal है

— संग्राम सिंह

1

@ pkozlowski.opensource मुझे ui-बूटस्ट्रैप के दृष्टिकोण पसंद है, हालांकि मैं मोडल के साथ सामग्री को स्थानांतरित करने के लिए प्रतीत नहीं कर सकता। मैंने इस पर कुछ शोध किया है और देखा कि अन्य लोगों के पास भी यह मुद्दा है।

— जुस्को

2

weblogs.asp.net/dwahlin/building-an-angularjs-modal-service मुझे यह कला बहुत उपयोगी लगी।

— जेनोनड

बस उल्लेख करने के लिए, एक सेवा को DOM तक नहीं पहुंचना चाहिए। एक निर्देश इसके लिए जगह है।

— सुपरलुमिनरी

1

@superluminary यह वास्तव में पालन करने के लिए एक अच्छा सामान्य नियम है, लेकिन यह जानना भी भगवान है कि एक निश्चित नियम क्यों गति में है और समझें कि जब ऐसा नियम हो सकता है (या यहां तक कि!) तोड़ा जाना चाहिए। मेरा मानना है कि मोडल्स / टूलटिप्स और जैसे नियम के अपवाद हैं। संक्षेप में: किसी को नियमों को जानने की आवश्यकता है लेकिन उस संदर्भ को भी समझें जहां वे लागू होते हैं / लागू नहीं होते हैं।

— pkozlowski.opensource

29

यह हास्यास्पद है क्योंकि मैं खुद को कोणीय सीख रहा हूं और यूट्यूब पर अपने चैनल से कुछ वीडियो देख रहा था। स्पीकर इस वीडियो में आपकी सटीक समस्या का उल्लेख करता है https://www.youtube.com/watch?v=ZhfUv0spHCY#t=1681 28:30 मिनट के निशान के आसपास।

यह कोड के उस विशेष टुकड़े को एक सेवा में रखने के बजाय नीचे आता है, फिर एक नियंत्रक।

मेरा अनुमान होगा कि नए पॉपअप तत्वों को DOM में इंजेक्ट किया जाए और उन्हें एक ही तत्व को दिखाने और छिपाने के बजाय अलग से हैंडल किया जाए। इस तरह से आपके पास कई पॉपअप हो सकते हैं।

पूरा वीडियो बहुत ही रोचक है :-)

— बार्ट
स्रोत

2

मिस्को कोणीय बीज है! (bwa haha)। गंभीरता से थो। कोणीय के लिए निश्चित स्रोत के रूप में उनके शब्दों को ।

— डेक

14

एक 'पॉपअप' निर्देश बनाएं और इसे पॉपअप सामग्री के कंटेनर में लागू करें
निर्देश में, सामग्री को एक पूर्ण स्थिति डिव में लपेटें और उसके नीचे मास्क डिव के साथ।
निर्देश के भीतर से जरूरत के अनुसार DOM पेड़ में 2 div को स्थानांतरित करना ठीक है। स्क्रीन के केंद्र में पॉपअप को रखने के लिए कोड सहित निर्देशों में कोई भी यूआई कोड ठीक है।
नियंत्रक को बूलियन ध्वज बनाएं और बांधें। यह ध्वज दृश्यता को नियंत्रित करेगा।
स्कोप वैरिएबल बनाएं जो बॉन्ड को OK / कैंसल फंक्शन्स आदि में बनाएँ।

एक उच्च स्तरीय उदाहरण (गैर कार्यात्मक) जोड़ने के लिए संपादन

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

— केतन
स्रोत

'घड़ी' के बदले $ घड़ी। यह भी शो 'पॉपअप' के बजाय 'पॉपअप' नहीं होगा scope.watch(showPopup, function(newVal, oldVal){?

— संग्राम सिंह

14

Http://adamalbrecht.com/2013/12/12/creating-a-simple-modal-dialog-directive-in-angular-js/ देखें। कोणीय और बूटस्ट्रैप की आवश्यकता के बिना सरल संवाद करने के सरल तरीके के लिए

संपादित करें: मैं तब से http://likeastore.github.io/ngDialog से एनजी-संवाद का उपयोग कर रहा हूं जो लचीला है और इसमें कोई निर्भरता नहीं है।

— निक डॉव
स्रोत

1

मैंने केवल इस दृष्टिकोण के साथ एक त्वरित स्प्रिंट किया था यह महसूस करने के लिए कि यह एकल पॉपअप / मोडल दृष्टिकोण के लिए बहुत अच्छा है, हालांकि इस विशेष यूएक्स के बारे में सोचें: एक ग्राहक एक आइटम का आदेश दे रहा है, और यूआई एक पुष्टिकरण पॉपअप प्रस्तुत करता है (इसलिए हम सामग्री के साथ एडम के पॉपअप 've' पर कब्जा कर लिया)। अब हम उस पॉपअप से भेजने या खरीदने या जो भी क्लिक करते हैं, और एक त्रुटि है जिससे उपयोगकर्ता को पिछली स्क्रीन में उस आदेश में संशोधन करने की आवश्यकता होती है। मैं शीर्ष स्तर पर किसी अन्य पॉपअप में उस त्रुटि को प्रदर्शित करना चाहता हूं। इस दृष्टिकोण से मुझे यह विश्वास नहीं होता है।

— जुस्को

3

सच है, लेकिन मुझे लगता है कि एक से अधिक पॉपअप एक गरीब यूआई हो सकता है।

— निक डॉव

अच्छी तरह से प्लगइन जवाब मैं देख रहा था!

— एंड्रेस फेलिप

7

कोणीय-उई संवाद निर्देशन के साथ आता है। इसका उपयोग करें और जो भी पेज आप शामिल करना चाहते हैं, उसके लिए टेम्प्लाटरल सेट करें। यह सबसे सुंदर तरीका है और मैंने इसे अपनी परियोजना में भी इस्तेमाल किया है। आप जरूरत के अनुसार संवाद के लिए कई अन्य मापदंडों को पारित कर सकते हैं।

— user2203937
स्रोत

5

कोणीय-बूटस्ट्रैप 0.6 बाद में $ डायल को $ मोडल के साथ बदल दिया गया है। इसका मतलब है कि आपको सभी कोड बदलने की आवश्यकता है जो $ डायल का उपयोग कर रहा है क्योंकि यह पदावनत है और इसे $ मोडल में लिखें

— मोहम्मद उमैर खान