Slickjs in angular，如何在页面渲染后调用？

Question

我一直在尽我所能在互联网上找到这个工作，而StackOverFlow是我现在最后的希望！

我想在我的角度应用程序中使用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

您应该对滑动轮播http://vasyabigi.github.io/angular-slick/使用Angular指令。我以前使用过它，它完美的工作。您可以使用光滑传送带的所有设置。就像这个例子：

模板：

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