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

Question

I have been doing everything I could find on internet to get this working, and StackOverFlow is my last hope now!

I am trying to use the SlickJs carousel in my angular app. The problem is, i need the slick() function to be called after the page content is render so the function can actually work.

If I have a button on the page, which would run the "slick()" function on ng-click, it will work fine (so the functionality is there), but that's obviously not how you want a carousel to work, depending on a button click. You want it to load automatically.

I have tried many things, including creating a directive like this which features the link function:

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

With the template:

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

No Matter what I do, I always end up with the template content rendered just as plain HTML rather than as a carousel. Any idea on this?

Answer 1

You should use Angular directive for slick-carousel http://vasyabigi.github.io/angular-slick/ . I've used it before and it works perfectly. You can use all the settings of slick carousel. Like in this example:

Template:

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

Controller:

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