Question

我一直在做我在网上找到的所有工作，而StackOverFlow是我最后的希望！

我正在尝试在我的角应用程序中使用SlickJs轮播。问题是，我需要在页面内容渲染后调用slick()函数，以便该函数可以实际工作。

如果我在页面上有一个按钮，它将运行＆＃34; slick()＆＃34;在ng-click上运行，它可以正常工作（所以功能就在那里），但这显然不是你想要一个轮播工作的方式，这取决于按钮点击。您希望它自动加载。

我尝试了很多东西，包括创建一个像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

您应该将Angular指令用于slick-carousel http://vasyabigi.github.io/angular-slick/。我之前使用过，它完美无缺。您可以使用光滑轮播的所有设置。就像在这个例子中一样：

模板：

<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,          
          }
      }
    ];

Slickjs有角度，如何在页面渲染后调用？

1 个答案: