एनजी-दोहराने के बाद निर्देश चलाएं

Question

तो मैं चीजों को सुसंगत रखने के लिए जहां भी संभव हो, प्लगइन की अपनी लाइब्रेरी को कोणीय में ले जाना चाहता हूं। जिस समस्या में मैं दौड़ रहा हूं वह अपने बच्चों के किसी भी निर्देश के बाद चलाने के निर्देशों को प्राप्त कर रहा है।

बस कुछ स्पष्टता देने के लिए, यहां लक्ष्य हमारे इंटीग्रेटर्स (सीएसएस/एचटीएमएल केवल टीम के सदस्यों) के लिए आसान है ताकि इसे आसानी से किसी फीचर के साथ टैग करके आइटमों में गतिशील कार्यक्षमता जोड़ सकें। वर्तमान में वे data-features विशेषता के माध्यम से ऐसा करते हैं। उदाहरण के लिए, एक छवि स्लाइडर के लिए वे यूएल को एक स्लाइडर बनाने के लिए data-features="imageSlider" विशेषता के साथ एक यूएल टैग कर सकते हैं।

उन पंक्तियों के साथ, मैं उस छवि स्लाइडर मॉड्यूल को कोणीय पर ले जाने पर काम कर रहा हूं। मैं अपने integrators की तरह कुछ लिखने के लिए सक्षम होना चाहते हैं:

<ul image-slider> 
    <li slide> 
     My Slide 1 
    </li> 
    <li slide> 
     My Slide 2 
    </li> 
    <li slide> 
     My Slide 3 
    </li> 
</ul> 

और मैं एक छवि स्लाइडर में है कि बदल सकते हैं गतिशील रूप से। ऊपर ठीक काम करता है, मार्कअप इस तरह दिखता है लेकिन यदि:

<ul image-slider> 
    <li slide ng-repeat="slide in data.slider.slides"> 
     My Slide {{$index}} 
    </li> 
</ul> 

फिर ng-repeat से पहले image-slider निर्देश चलाता है, जिसका मतलब है मैं अपने जादू काम करने के लिए सभी स्लाइड पर पहुँच नहीं है समाप्त नहीं करता है।

क्या कोई तरीका है कि मैं image-slider निर्देश को फायरिंग से पहले खत्म करने के लिए किसी भी निर्देश के इंतजार के लिए कह सकता हूं?

मैं निम्नलिखित प्रश्न पहले से ही पढ़ा है:

• Directive that run after ng-repeat
• Angularjs custom directive highlight text after ng repeat has run
• इनमें से Running parent directives after children directives

कोई भी इस समस्या का एक जवाब तो मैं सोचा मैं रखा है लगता है एक जवाब खोजने की उम्मीदों में एक और अधिक संक्षिप्त सवाल है।

Answer 1

तो ऐसा करने का सबसे आसान तरीका स्लाइड निर्देश और छवि-स्लाइडर निर्देश के बीच directive to directive communication का उपयोग करना है। यहाँ आप क्या करते हैं:

app.directive("imageSlider", [ '$log', function($log) { 
    return { 
     scope: { 
     }, 
     controller: function($scope) { 

      $scope.slides = []; 

      // this is a normal controller method that is NOT exposed to other directives 
      $scope.startGallery = function() { 
      }; 

      // this method will be exposed to directives that require imageSlider 
      this.addSlide = function(slide) { 
       $scope.slides.push(slide); 
      } 
     } 
    }; 
} ]); 


app.directive('slide', [ '$log', function($log) { 
    return { 
     require: "^imageSlider", 
     link: function($scope, elem, attribs, ctrls) { 
      ctrls.addSlide($scope); 
     } 
    }; 
} ]); 

इस तरह imageSlider एक अंतरफलक स्लाइड के माध्यम से संवाद करने के लिए प्रदान कर सकते हैं। इस में अंतर पर ध्यान दें। फ़ंक्शननाम बनाम $ scope.functionName। पूर्व अन्य तरीकों के तरीकों का पर्दाफाश करने का एक तरीका है।

Answer 2

मैं एक बहुत ही सरल दृष्टिकोण का सुझाव देता हूं। $timeout फ़ंक्शन का उपयोग करें। यदि आप $timeout को शून्य पर सेट करते हैं, तो यह सब कुछ चलने के ठीक बाद चलता है:

app.directive("imageSlider", [ '$timeout', function($timeout) { 
    return function(scope, element, attrs) 
    { 
     // your data is defined in scope.data.slider.slides 

     $timeout(function() 
     { 
      // This code will run whenever the page has finished processing 
      // So it will run after ng-repeat has finished 
     }, 0); 
    } 
}]);