使用光滑的 js 轮播进行 ng-repeat答案

【问题标题】：ng-repeat with slick js carousel使用光滑的 js 轮播进行 ng-repeat
【发布时间】：2015-05-25 17:13:03
【问题描述】：

我是 angularjs 新手，我很难为 https://github.com/vasyabigi/angular-slick 等 js 插件和其他一些 js 模块（横幅...）使用 ng-repeat

  <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 采取行动之前，可能没有足够的时间等待所有图像完成渲染。

该指令确实有 $timeout (https://github.com/vasyabigi/angular-slick/blob/master/dist/slick.js)。

【问题讨论】：

标签： angularjs

【解决方案1】：

似乎可以正常工作。

Plunker Demo

也许您可以在您的 src 中显示代码，而不是结果？

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

【讨论】：

我认为我不能使用您的指令添加或删除幻灯片。

【解决方案2】：

您可以添加 init-onload=true 和 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>

来源： https://github.com/vasyabigi/angular-slick/issues/2

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

【讨论】：