javascript - json 数据上的 Angular js 中的 Slick Carousel 不起作用

Question

我使用这个程序 github.com/vasyabigi/angular-slick .它不适用于动态数据。它只适用于静态数据。在动态数据中，它显示垂直图像而不是水平图像，没有轮播。请帮助我。 这是我的指令

directive('slick',function($timeout) {  return {
restrict: "AEC",
scope: {
  initOnload: "@",
  data: "=",
  currentIndex: "=",
  accessibility: "@",
  arrows: "@",
  autoplay: "@",
  autoplaySpeed: "@",
  centerMode: "@",
  centerPadding: "@",
  cssEase: "@",
  dots: "@",
  draggable: "@",
  easing: "@",
  fade: "@",
  infinite: "@",
  lazyLoad: "@",
  onBeforeChange: "@",
  onAfterChange: "@",
  onInit: "@",
  onReInit: "@",
  pauseOnHover: "@",
  responsive: "&",
  slide: "@",
  slidesToShow: "@",
  slidesToScroll: "@",
  speed: "@",
  swipe: "@",
  touchMove: "@",
  touchThreshold: "@",
  vertical: "@"
},
link: function(scope, element, attrs) {
  var initializeSlick, isInitialized;
  initializeSlick = function() {
    return $timeout(function() {
      var currentIndex, slider;
      slider = $(element);
      if (scope.currentIndex != null) {
        currentIndex = scope.currentIndex;
      }
      slider.slick({
        accessibility: scope.accessibility !== "false",
        arrows: scope.arrows !== "false",
        autoplay: scope.autoplay === "true",
        autoplaySpeed: scope.autoplaySpeed != null ? parseInt(scope.autoplaySpeed, 10) : 3000,
        centerMode: scope.centerMode === "true",
        centerPadding: scope.centerPadding || "50px",
        cssEase: scope.cssEase || "ease",
        dots: scope.dots === "true",
        draggable: scope.draggable !== "false",
        easing: scope.easing || "linear",
        fade: scope.fade === "true",
        infinite: scope.infinite !== "false",
        lazyLoad: scope.lazyLoad || "ondemand",
        onBeforeChange: scope.onBeforeChange || null,
        onAfterChange: function(sl, index) {
          if (scope.onAfterChange) {
            scope.onAfterChange();
          }
          if (currentIndex != null) {
            return scope.$apply(function() {
              currentIndex = index;
              return scope.currentIndex = index;
            });
          }
        },
        onInit: function(sl) {
          if (scope.onInit) {
            scope.onInit();
          }
          if (currentIndex != null) {
            return sl.slideHandler(currentIndex);
          }
        },
        onReInit: scope.onReInit || null,
        pauseOnHover: scope.pauseOnHover !== "false",
        responsive: scope.responsive() || null,
        slide: scope.slide || "div",
        slidesToShow: scope.slidesToShow != null ? parseInt(scope.slidesToShow, 10) : 1,
        slidesToScroll: scope.slidesToScroll != null ? parseInt(scope.slidesToScroll, 10) : 1,
        speed: scope.speed != null ? parseInt(scope.speed, 10) : 300,
        swipe: scope.swipe !== "false",
        touchMove: scope.touchMove !== "false",
        touchThreshold: scope.touchThreshold ? parseInt(scope.touchThreshold, 10) : 5,
        vertical: scope.vertical === "true"
      });
      return scope.$watch("currentIndex", function(newVal, oldVal) {
        if ((currentIndex != null) && (newVal != null) && newVal !== currentIndex) {
          return slider.slickGoTo(newVal);
        }
      });
    });
  };
  if (scope.initOnload) {
    isInitialized = false;
    return scope.$watch("data", function(newVal, oldVal) {
      if ((newVal != null) && !isInitialized) {
        initializeSlick();
        return isInitialized = true;
      }
    });
  } else {
    return initializeSlick();
  }
}  };});

Answer 1

有一个属性叫做init-onLoad，让它为真即可。

<slick init-onload=true data="awesomeThings">
  ...
</slick>