NG-重复用油滑的js旋转木马 [英] ng-repeat with slick js carousel

问题描述

我是新来angularjs，我有一个很难与NG-重复的JS插件工作如 HTTPS ：//github.com/vasyabigi/angular-slick 和其他一些JS模块（旗...）

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

也许没有足够的时间来等待所有图像渲染完毕的slickJs采取行动之前。

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

该指令确实有$超时（ https：//开头的github .COM / vasyabigi /角光滑/ BLOB /主/距离/ slick.js ）虽然。

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

推荐答案

似乎没有问题需要解决。

Seems to work without issues.

Plunker演示

也许你可以显示code在你的src，而不是结果呢？

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>

控制器：

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

这篇关于NG-重复用油滑的js旋转木马的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！