कोणीय: निर्देश के सभी उदाहरण

Question

मैं उपयोगकर्ता द्वारा अनुभाग द्वारा तीर कुंजी के साथ पृष्ठ पर नेविगेट करने की अनुमति देने के लिए निर्देश बनाने का प्रयास कर रहा हूं। लेकिन मैं भी उन वर्गों को डोम के चारों ओर बिखरे हुए होने में सक्षम होना चाहता हूं, और सामान को जोड़ा और हटाए जाने पर यह तोड़ना नहीं है। मैं यह करने के लिए कई तरीके के बारे में सोच सकते हैं, लेकिन उनमें से कोई भी संतोषजनक हैं:

• एक नियंत्रक अन्य निर्देशों खुद को पंजीकृत है, के साथ एक निर्देश बनाएं (और $ पर अपंजीकृत नष्ट)। लेकिन अगर मैं बीच में कुछ जोड़ता हूं तो यह आदेश से बाहर होगा। इसके अलावा, मैंने इसे इस तरह लिखने की कोशिश की है, और यह आवश्यकतानुसार अधिक कोड जैसा लगता है।

• जब भी उपयोगकर्ता तीर कुंजी हिट, एक खाली सरणी बनाने के लिए, और निर्देशों उस सूची पर खुद को रजिस्टर करने के लिए के लिए $ एक घटना का प्रसारण, एक कॉलबैक के साथ। फिर, एक बार यह सूची भरने के बाद, अग्रिम या उस पर पीछे जाएं। वे (चाहिए?) क्रम में वापस आने के क्रम में वापस आते हैं, लेकिन मुझे यकीन नहीं है क्योंकि इस तरह पागल और हैकिश लगता है।

• सीएसएस के साथ 'टैबबबल' चीजें चिह्नित करें, और jquery में यह आसान तरीका लिखें, इस तरह कुछ: एक नए क्लिक ईवेंट पर, var all = $('.tabbable'), और फिर उसके साथ स्पष्ट करें। लेकिन मैं वास्तव में ऐसा नहीं करना चाहता, क्योंकि यह 'कोणीय' तरीका नहीं है। शुद्धता की कुछ समझ से बाहर नहीं, बल्कि इसलिए कि मैं इसे विगेट्स की एक बड़ी लाइब्रेरी के हिस्से के रूप में बना रहा हूं, और मैं चाहता हूं कि यह कार्यक्षमता उन तक पहुंच योग्य हो।

तो, क्या मेरे लिए किसी भी तरह से, अजीब हैक्स का सहारा, या हर जगह बाहर तर्क प्रसार के बिना एक विशेष प्रकार के सभी निर्देशों का स्कोप प्राप्त करने के लिए है?

Answer 1

AngularJS services सिंगलेट हैं और निर्भरता इंजेक्शन के माध्यम से आवश्यक हो सकते हैं। आप अपने निर्देशों को राज्य प्रबंधक सेवा की आवश्यकता हो सकती है और वृद्धिकर्ता/कमीशन कॉल कर सकते हैं।

वैकल्पिक रूप से, थोड़ा आसान लेकिन अधिक भंगुर, आप $ rootScope में सरणी रख सकते हैं। यह एक jquery चयनकर्ता वैश्विक की तुलना में अधिक मूर्खतापूर्ण "कोणीय" (लेकिन अधिक नहीं) है, लेकिन यदि आप विजेट लाइब्रेरी बना रहे हैं तो शायद सबसे अच्छा मार्ग नहीं है।

Answer 2

यह एक अच्छा सवाल है। +1

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

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

सबसे पहले, हम इस घटक की स्थिति का प्रबंधन करने के लिए एक सेवा बनाते हैं। यह आसान है। आइए इसे SectionsService पर कॉल करें। इसके बाद, हम अनुभागों को पंजीकृत करने का निर्देश बनाते हैं। आइए सादगी के लिए section पर कॉल करें। section निर्देश अपने लिंकिंग चरण के दौरान SectionsService के साथ डीओएम नोड की आईडी (शायद विशिष्टता सुनिश्चित करने के लिए प्रोग्रामेटिक रूप से बनाया गया) पंजीकृत करता है। चूंकि डीओएम संसाधित (ज्यादातर) संसाधित होता है, इसलिए SectionsService में जोड़े गए नोड भी क्रमशः होंगे।तो डोम इस (अप्रासंगिक छोड़े गए सामान) तरह दिखता है:

<div section>...</div> 

<!-- other stuff --> 

<div section>...</div> 

<!-- other stuff --> 

<!-- etc. --> 

(हालांकि यहाँ क्षेत्र से बाहर है, यह बहुत इस तरह से कि क्रम का कोई प्रभाव नहीं होता में यह कार्यक्रम मुश्किल नहीं होगा, लेकिन यह आपके ऐप के विनिर्देशों पर आधारित होना चाहिए जो मुझे नहीं पता।)

अगला, आप तीर कुंजी हैंडलर की तरह अपने ट्रिगर्स बनाते हैं। इन घटनाओं पर, आप सूची में पिछले/अगले नोड पर जाने के लिए बस SectionService बताएं। AngularJS $anchorScroll नामक एक सेवा के साथ आता है जिसका उपयोग ब्राउज़र की हैश-आधारित स्थिति को अनुकरण करने के लिए किया जा सकता है जिसे हम परिचित हैं। यदि आप चाहें तो स्क्रॉलिंग को एनिमेट करने के लिए आप स्पष्ट रूप से एक jQuery प्लगइन का उपयोग भी कर सकते हैं।

और यही वह है! एक बहुत ही सरल निर्देश, एक काफी सरल सेवा, और जो भी ट्रिगर आपको चाहिए। सभी ने कहा, मुझे लगता है कि परीक्षण सहित 100 से कम लाइनों का अनुमान लगाया जाएगा। सभी घटकों को decoupled और आसानी से परीक्षण योग्य हैं, लेकिन अभी भी वास्तव में काफी सरल है। विचार सत्य रहता है। कोणीय रास्ता संरक्षित है।

और बहुत खुशी हुई।

---

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