带有 Angular JS 的光滑轮播

Question

我在我的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, 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

我怀疑 slick 插件可能需要完全渲染 DOM 才能正常工作。

试试：

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

Answer 2

$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;
                }
            });
        }
    }
});

这种方式 angularJS 监视要加载的数据，并且仅在数据有长度时才挂起。

（顺便说一句，$watch 是必需的，而不是 $observe，因为“数据”属性不使用插值（“{{...}}”）​​：如果你想获得低调一点。）

用法：

<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 so answer 和this github 我从this so question 获得的