2

I'm new to angularjs and I have a hard time working with ng-repeat for js plugins like https://github.com/vasyabigi/angular-slick and some other js modules (banner...)

  <slick class="slider lazy">
   <div ng-repeat="slide in slides"><div class="image"><img data-lazy="http://vasyabigi.github.io/angular-slick/images/lazyfonz2.png"/></div></div>
</slick

     <slick class="slider lazy">
       <div><div class="image"><img data-lazy="..."/></div></div>
        <div><div class="image"><img data-lazy="..."/></div></div>...  >> without ng-repeat, it works
    </slick

Maybe there's not enough time to wait for all images finish rendering before the slickJs takes action.

The directive does have $timeout (https://github.com/vasyabigi/angular-slick/blob/master/dist/slick.js) though.

nam vo
  • 3,271
  • 12
  • 49
  • 76

2 Answers2

7

Seems to work without issues.

Plunker Demo

Maybe you can show the code in your src, not the result?

html:

<slick autoplay="true" autoplaySpeed="500" fade="true">
  <div ng-repeat="image in images">
    <img data-lazy="{{image}}">
  </div>
</slick>

controller:

var app = angular.module('demo',['slick']);

app.controller('Ctrl', function($scope) {
  $scope.images = [
    "http://vasyabigi.github.io/angular-slick/images/lazyfonz1.png",
    "http://vasyabigi.github.io/angular-slick/images/lazyfonz2.png",
    "http://vasyabigi.github.io/angular-slick/images/lazyfonz3.png",
    ];
});
Max Fichtelmann
  • 3,366
  • 1
  • 22
  • 27
3

You can add init-onload=true and data=(urDataArray):

html:

<slick autoplay="true" autoplaySpeed="500" fade="true" init-onload=true data="slides">
<div ng-repeat="slide in slides"><img data-lazy="..."/></div>
</slick>

Source: https://github.com/vasyabigi/angular-slick/issues/2

Plunker: http://plnkr.co/edit/fakN9jW5h1ssWaiWaHeN?p=preview

Prince V
  • 81
  • 8