एनजी-दोहराने वाले तत्वों की कक्षाओं को बदलने के लिए कोणीय निर्देश का उपयोग करें

Question

मैं एक असामान्य सूची में घिरे तत्व के वर्ग को सशर्त रूप से बदलने की कोशिश कर रहा हूं।

सूची बनाने के लिए एनजी-दोहराने का उपयोग नहीं करते समय मैं सही तत्व खोजने और कक्षा को बदलने के लिए jqlite selector .children() का उपयोग कर सकता हूं।

हालांकि मैं सूची बनाने के लिए एनजी-दोहराव का उपयोग कर रहा हूं और मैं यह नहीं समझ सकता कि विशिष्ट सूची तत्व को कैसे एक्सेस किया जाए। .children() हमेशा अपरिभाषित लौटता है।

यहाँ मैं क्या http://jsfiddle.net/whitehead1415/ENtTC/3/

app.directive('myDirective1', function() { 
    return { 
     restrict: 'A', 
     link: function ($scope, element, attrs, controller) { 
      //for some reason element.children()[0] is undefined 
      //why? what can I do about it? 
      angular.element(element.children()[0]).css('background', 'grey') 
     } 
    }; 
}); 

मैं 2 बातें

1. के आधार पर वर्ग को बदलने में सक्षम होने की जरूरत है ऐसा करने के लिए कोशिश कर रहा हूँ की एक jsfiddle है जब विशिष्ट पर उपयोगकर्ता क्लिक करता है तत्व को
2. पर प्रकाश डालने की आवश्यकता है जब उपयोगकर्ता अगले तत्व वाले बटन पर क्लिक करता है (उस बटन को jsfiddle में शामिल नहीं किया गया है)

मैं प्रत्येक सूची तत्व पर निर्देश लगाने के बारे में सोचा था, लेकिन केवल समस्या यह है कि मैं नहीं जानता कि कैसे उन सब को एक दूसरे को इतना केवल एक ही तत्व एक समय में हाइलाइट किया गया है के बारे में पता करने के लिए है

Answer 1

कारण ऐसा होता है क्योंकि ng-repeat टेम्पलेट डीओएम को इस तरह से बदलता है कि जब निर्देश निर्देश संकलित होते हैं तो बच्चे मौजूद नहीं होते हैं। आपको निर्देश में element.children() पर $watch सेट करने की आवश्यकता है ताकि बच्चों को जोड़े जाने पर और उस समय सीएसएस लागू करने पर निर्देश अधिसूचित किया जाएगा। अपने link समारोह में यह कर (एक postLink समारोह जब एक निर्देश विधि के रूप में घोषित है):

$scope.$watch(element.children(),function(){ 
    var children = element.children(); 
    for(var i=0;i<children.length;i++){ 
     if(children[i].nodeType !== 8){ 
      angular.element(children[i]).css('background', 'grey'); 
     } 
    } 
}); 

$watch भी की जाँच करें और सुनिश्चित करें कि nodeType एक टिप्पणी नहीं है की जरूरत है (प्रकार 8) क्योंकि ng-repeat आवेषण टिप्पणियां, जो आप सीएसएस लागू करने का प्रयास करते हैं तो एक त्रुटि फेंक देंगे।

फिडल: यहाँ working fiddle