angular中的Slick Js，页面渲染后如何调用？

Question

我一直在尽我所能在互联网上找到它，Whosebug 是我现在最后的希望！

我正在尝试在我的 angular 应用程序中使用 SlickJs 轮播。问题是，我需要在呈现页面内容后调用 slick() 函数，这样该函数才能真正起作用。

如果我在页面上有一个按钮，它将运行 ng-click 上的“slick()”功能，它会工作正常（所以功能在那里），但这显然是不是您希望旋转木马如何工作，具体取决于单击按钮。您希望它自动加载。

我已经尝试了很多东西，包括创建一个像这样的具有 link 功能的指令：

app.directive('ngGallery', function(){
    return {
        restrict: 'E',
        scope: {
            items: '=items'
        },
        templateUrl: 'app/directives/templates/galleryTmp.html',
        link: function($scope, $elem, attrs){   
            angular.element(".slick").slick({
                arrows: false,
                dots: true,
                mobileFirst: true,
             });
        }
    }
});

使用模板：

<div class="slick" style="width:600px; max-width:98%; height:auto; margin:0 auto;">
    <div ng-repeat="c in items" style="text-align:center;">
        <img ng-src="{{c.Url}}" style="width:100%; height:auto;" />
        <br />
        <i>{{c.Text}}</i>
    </div>
</div>

无论我做什么，我总是以模板内容呈现为普通 HTML 而不是轮播。对此有什么想法吗？

Answer 1

您应该对 slick-carousel http://vasyabigi.github.io/angular-slick/ 使用 Angular 指令。我以前用过，效果很好。您可以使用 slick carousel 的所有设置。就像这个例子：

模板：

<slick dots="true" responsive="breakpoints" infinite="true" init-onload="init-onload" data="mainSlide" arrows="arrows" class="big-slider"><img src="{{slide.image}}" class="hidden imgPreloader"/>
    <div ng-show="dataLoaded" style="background-image: url({{slide.image}})" ng-repeat="slide in mainSlide" class="slide-item">
      <div class="text-container">
        <div class="text">
          <h2>{{slide.title}}</h2>
          <p class="hidden-xs">{{slide.text}}</p>
        </div>
      </div>
    </div>
  </slick>

控制器：

$scope.dataLoaded = false;
    // Main Slide
    var MainSlide = $resource('api/home-slider');

    MainSlide.query(function(data){
        $scope.mainSlide = data; 
        $scope.dataLoaded = true;
    });

    $scope.breakpoints = [
      {
          breakpoint: 1025,
          settings: {
              arrows: false,
              slidesToShow: 2,
          }
      },
      {
          breakpoint: 550,
          settings: {
              arrows: false,
              slidesToShow: 1,          
          }
      }
    ];

angular中的Slick Js，页面渲染后如何调用？

Slickjs in angular, how to invoke after the page renders?

angularjs

angular-directive

slick.js