AngularJS - $broadcast to only commence on the first match -


मेरे पास निम्न मार्कअप है:

  & lt; div class = "parent" & gt; & Lt; div वर्ग = "बच्चों में बच्चे" & gt;  

और अभिभावक के लिए निर्देश, और बच्चे के लिए एक निर्देश पहले बच्चे को झंडा मिला scope.isHovered = true , जबकि बाकी सब झूठे हो जाते हैं

अब, माता-पिता पर, जब एक बटन क्लिक किया जाता है, तो मैं चाहता हूं कि अगले बच्चे को चुना जाए। तो मेरे पास क्या था:

  // मूल कार्यक्षेत्र के लिंक फ़ंक्शन .selectNext = function () {scope। $ Broadcast ('HOVER_NEXT'); } // चाइल्ड स्कोप के लिंक फंक्शन। Hovered = false; यदि (दायरे। $ पहले) scope.isHovered = सच; दायरा। $ ('HOVER_NEXT', फ़ंक्शन () (यदि (स्कोप.आईएच और amp; क्षेत्र। $$ अगला सिब्लिंग) {scope.isHovered = false; गुंजाइश। $ $ अगला सिबलिंग.हिंह = सच; गुंजाइश। $ लागू होते हैं हालांकि, एक घटना पर, सभी बच्चे को अपना कोड मिलता है  सही पर सेट है, क्योंकि  $ पर  प्रसारण, पहले बच्चे को पहली बार कहा जाता है, और इसलिए यह दूसरे बच्चे को सच्चा होना तय करता है। फिर दूसरे बच्चे को कहा जाता है, और इतने पर और आगे भी। 

क्या इस चुनौती पर काबू पाने का एक तरीका है? रिवर्स ऑर्डर में बच्चों पर प्रसारित कॉल करें?

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

<पूर्व> // मूल निर्देशक लिंक: फ़ंक्शन (स्कोप, एल्म, एट्र) {var currentActive = 1; // पहला बच्चा सक्रिय बाल होगा Count = 0; $ Scope.getCurrenActive = फ़ंक्शन () {वर्तमान चालू करें; }; // उस क्रिया के एनजी-क्लिक पर कॉल करें जिसे आप $ scope.rotateCurrentActive () = समारोह के बारे में बात करते हैं () {currentActive ++; यदि (कोणीय.विनिर्धारित (स्कोप। चाइल्डकाउंट) और amp; वर्तमान क्रियात्मक; gt; बालकाउंट) {वर्तमान क्रिया = 1; }}; $ Scope.register = function () {// यह बच्चे की पहचान करने के लिए एक पंजीकरण संख्या या आईडी के रूप में कार्य करता है / हम इसका उपयोग रोटेशन के लिए 1 रिटर्न + + चाइल्डकाउंट पर भी कर सकते हैं; }} // बाल निर्देश की आवश्यकता है: '^ parent', गुंजाइश: {रजिस्टर: '& amp; }, लिंक: फ़ंक्शन (स्कोप, एल्म, एट्र) {var myId = scope.register (); Scope.getMyId = फ़ंक्शन () {myId; }}

अब देखें / HTML

  & lt; div class = "parent" & gt; & Lt; div class = "child" ng- वर्ग = "{होवर: getMyId () == getCurrentActive ()}" & gt; & lt; / div & gt; & Lt; div class = "child" ng- वर्ग = "{होवर: getMyId () == getCurrentActive ()}" & gt; & lt; / div & gt; & Lt; div class = "child" ng- वर्ग = "{होवर: getMyId () == getCurrentActive ()}" & gt; & lt; / div & gt; & Lt; div class = "child" ng- वर्ग = "{होवर: getMyId () == getCurrentActive ()}" & gt; & lt; / div & gt; & Lt; div class = "child" ng- वर्ग = "{होवर: getMyId () == getCurrentActive ()}" & gt; & lt; / div & gt; & Lt; / div & gt;  

Comments

Popular posts from this blog

sqlite3 - UPDATE a table from the SELECT of another one -

c# - Showing a SelectedItem's Property -

javascript - Render HTML after each iteration in loop -