jquery – 带角度JS的Slick Carousel

我在 AngularJS应用程序中使用 Slick转盘.为此我创建了如下指令：

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

这是我的视图文件中的代码：

<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>

在这种情况下,它正常工作正常并正确初始化.

但是当我使用ngRepeat动态创建幻灯片时,它不是初始化,而是一个接一个地显示幻灯片.

这是我的代码使用ngRepeat

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

任何建议,我该如何解决？

解决方法

我怀疑光滑的插件可能需要DOM被完全渲染才能正常工作.

尝试：

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