油滑的旋转木马与JS角 [英] Slick Carousel with Angular JS

问题描述

我使用油滑旋转木马在我的之一AngularJS 应用。对于我创建指令如下：

I am using Slick carousel in one of my AngularJS application. For that I have created directive as follows:

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

下面是我的code在视图文件：

Here is my code in view file:

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

在此情况下，它是工作的罚款，并正确初始化。

In this case it is working fine and initializing properly.

但是，当我创建动态使用 ngRepeat 的滑动，它是不进行初始化并显示幻灯片一前一后其他。

But when I creates slides dynamically using ngRepeat, it is not initializing and shows slides one after the other.

下面是用我的code ngRepeat

Here is my code using 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>

任何建议，我怎么能解决这个问题？

Any suggestion, how can I resolve it?

推荐答案

我怀疑是华而不实的插件可能需要DOM将完全呈现正常工作。

I suspect that the slick plugin may need the DOM to be fully rendered to work properly.

尝试：

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

这篇关于油滑的旋转木马与JS角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！