jQuery 带有 Angular JS 的光滑轮播

Slick Carousel with Angular JS

提问by Kalpesh Patel

I am using Slickcarousel in one of my AngularJSapplication. For that I have created directive as follows:

我在我的AngularJS应用程序之一中使用Slickcarousel 。为此，我创建了如下指令：

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

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.

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

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

但是当我使用ngRepeat动态创建幻灯片时，它不会初始化并一个接一个地显示幻灯片。

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

Any suggestion, how can I resolve it?

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

回答by pixelbits

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

我怀疑这个漂亮的插件可能需要完全渲染 DOM 才能正常工作。

Try:

尝试：

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

回答by lukkea

$timeout still didn't give the data enough time to initialise for my scenario so I modified the directive a bit more to watch for the data to have content (this could also have the effect of rebinding whenever the data changes, not just once the DOM initializes onLoad, if you change the use of isInitialized):

$timeout 仍然没有给数据足够的时间来初始化我的场景，所以我修改了更多的指令以观察数据是否有内容（这也可能在数据更改时重新绑定，而不仅仅是一次DOM 初始化 onLoad，如果你改变使用 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;
                }
            });
        }
    }
});

This way angularJS watches for the data to be loaded and only hooks up the slick when data has length.

这样 angularJS 会监视要加载的数据，并且仅在数据有长度时才连接浮油。

(btw $watch is necessary, instead of $observe, because "data" attribute doesn't use interpolation ( "{{...}}" ): Take a look at this great answerif you want to get the low-down on this.)

（顺便说一句，$watch 是必要的，而不是 $observe，因为“数据”属性不使用插值（“{{...}}”）​​：如果您想了解详情，请查看这个很棒的答案在这一点上。）

usage:

用法：

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

thanks to this so answerand this githubthat I got to from this so question

多亏了 这个如此的答案和我从这个如此的问题中得到的这个 github