कोणीय जेएस

Question

के साथ स्लिम कैरोसेल मैं अपने AngularJS एप्लिकेशन में से एक में Slick कैरोसेल का उपयोग कर रहा हूं। कि मैं निर्देश बनाई गई इस प्रकार है: यह ठीक काम कर रहा है और ठीक से शुरू कर रहा है इस मामले में

<div class="clearfix" 
    slick-slider="{dots: false, arrows: true, draggable: 
    false, slidesToShow:3, infinite:false}"> 
       <div class="my-slide"> 
        <a><img ng-src="assets/img/img1.png"/></a> 
       </div> 
       <div class="my-slide"> 
        <a><img ng-src="assets/img/img1.png"/></a> 
       </div> 
       <div class="my-slide"> 
        <a><img ng-src="assets/img/img1.png"/></a> 
       </div> 
       <div class="my-slide"> 
        <a><img ng-src="assets/img/img1.png"/></a> 
       </div> 
       <div class="my-slide"> 
        <a><img ng-src="assets/img/img1.png"/></a> 
       </div> 
       <div class="my-slide"> 
        <a><img ng-src="assets/img/img1.png"/></a> 
       </div> 
    </div> 

:

myApp.directive('slickSlider',function(){ 
    return { 
    restrict: 'A', 
    link: function(scope,element,attrs) { 
     $(element).slick(scope.$eval(attrs.slickSlider)); 
    } 
    } 
}); 

यहाँ दृश्य फ़ाइल में मेरी कोड है।

लेकिन जब मैं ngRepeat का उपयोग करके गतिशील रूप से स्लाइड्स बनाता हूं, तो यह प्रारंभ नहीं होता है और स्लाइड के बाद एक को दिखाता है।

यहाँ मेरी कोड ngRepeat

<div class="clearfix" 
    slick-slider="{dots: false, arrows: true, draggable: 
    false, slidesToShow:3, infinite:false}"> 
     <div class="my-slide" ng-repeat="slide in slides"> 
     <a><img ng-src="assets/img/{{slide.img}}"/></a> 
     </div> 
</div> 

कोई भी सुझाव उपयोग कर रहा है, मैं इसे कैसे हल कर सकते हैं?

Answer 1

मुझे संदेह है कि स्लिम प्लगइन को डीओएम को सही तरीके से काम करने के लिए पूरी तरह से प्रस्तुत करने की आवश्यकता हो सकती है।

प्रयास करें:

myApp.directive('slickSlider',function($timeout){ 
return { 
    restrict: 'A', 
    link: function(scope,element,attrs) { 
    $timeout(function() { 
     $(element).slick(scope.$eval(attrs.slickSlider)); 
    }); 
    } 
} 
}); 

Answer 2

$ टाइमआउट अभी भी डेटा सामग्री के लिए के लिए डेटा तो मैं निर्देश में थोड़ा और अधिक देखने के लिए संशोधित मेरी परिदृश्य के लिए आरंभ करने के लिए पर्याप्त समय नहीं दिया है (यह भी हो सकता था rebinding का असर जब भी डाटा परिवर्तन ही नहीं, एक बार डोम initializes ऑनलोड, अगर आप) isInitialized के उपयोग बदलने के लिए: के लिए डेटा लोड करने के लिए और केवल चालाक जब तक हुक

app.directive('slickSlider', function() { 
    return { 
     restrict: 'A', 
     scope: {'data': '='}, 
     link: function (scope, element, attrs) { 
      var isInitialized = false; 
      scope.$watch('data', function(newVal, oldVal) { 
       if (newVal.length > 0 && !isInitialized) { 
        $(element).slick(scope.$eval(attrs.slickSlider)); 
        isInitialized = true; 
       } 
      }); 
     } 
    } 
}); 

इस तरह AngularJS देखता है डेटा लंबाई है।

(बीटीडब्ल्यू $ घड़ी आवश्यक है, $ निरीक्षण के बजाय, क्योंकि "डेटा" विशेषता इंटरपोलेशन ("{{...}}" का उपयोग नहीं करती है): यदि आप कम प्राप्त करना चाहते हैं तो this great answer पर एक नज़र डालें इस पर -down)

उपयोग:। this so answer को

<div class="clearfix" data="slides" 
    slick-slider="{dots: false, 
        arrows: true, 
        draggable: false, 
        slidesToShow:3, 
        infinite:false}"> 
    <div class="my-slide" ng-repeat="slide in slides"> 
     <a><img ng-src="assets/img/{{slide.img}}"/></a> 
    </div> 
</div> 

धन्यवाद और this github कि मुझे मिल गया के लिए this so question