油滑旋转木马在JSON数据角度JS不工作 [英] Slick Carousel in angular js on json data not working

问题描述

我的用户这个节目 github.com/vasyabigi/angular-slick 。它不与动态数据的工作。它只是静态的数据。在动态数据显示它图像垂直insted的水平，没有Carouseling。请帮助我。
这里是我的diractive

 指令（'滑头'，函数（$超时）{{回报
限制：AEC
范围： {
  initOnload：@，
  数据：=，
  CURRENTINDEX：=，
  可访问性：@，
  箭头：@，
  自动播放： @，
  autoplaySpeed​​：@，
  centerMode：@，
  centerPadding：@，
  cssEase：@，
  点：@，
  可拖动：@，
  宽松：@，
  褪色： @，
  无穷： @，
  lazyLoad：@，
  onBeforeChange：@，
  onAfterChange：@，
  OnInit的：@，
  onReInit：@，
  pauseOnHover：@，
  响应：与＆amp;，
  幻灯：@，
  slidesToShow：@，
  slidesToScroll：@，
  速度：@，
  刷卡：@，
  touchMove：@，
  touchThreshold：@，
  纵向：@
}，
链接：功能（范围，元素，ATTRS）{
  VAR initializeSlick，将IsInitialized;
  initializeSlick =功能（）{
    返回$超时（函数（）{
      VAR CURRENTINDEX，滑块;
      滑块= $（元）;
      如果（scope.currentIndex！= NULL）{
        CURRENTINDEX = scope.currentIndex;
      }
      slider.slick（{
        辅助功能：scope.accessibility ==假，
        箭：scope.arrows ==假，
        自动播放：scope.autoplay ===真，
        autoplaySpeed​​：scope.autoplaySpeed​​！= NULL？ parseInt函数（scope.autoplaySpeed​​，10）：3000，
        centerMode：scope.centerMode ===真，
        centerPadding：scope.centerPadding || 50像素
        cssEase：scope.cssEase || 缓解，
        点：scope.dots ===真，
        可拖动：scope.draggable ==假，
        宽松：scope.easing || 线性，
        褪色：scope.fade ===真，
        无限：scope.infinite ==假，
        lazyLoad：scope.lazyLoad || 一经请求，
        onBeforeChange：scope.onBeforeChange ||空值，
        onAfterChange：功能（SL，指数）{
          如果（scope.onAfterChange）{
            scope.onAfterChange（）;
          }
          如果（CURRENTINDEX！= NULL）{
            返回范围。$应用（函数（）{
              CURRENTINDEX =指数;
              返回scope.currentIndex =指数;
            }）;
          }
        }，
        OnInit的：功能（SL）{
          如果（scope.onInit）{
            scope.onInit（）;
          }
          如果（CURRENTINDEX！= NULL）{
            返回sl.slideHandler（CURRENTINDEX）;
          }
        }，
        onReInit：scope.onReInit ||空值，
        pauseOnHover：scope.pauseOnHover ==假，
        回应：scope.responsive（）||空值，
        幻灯：scope.slide || 分区，
        slidesToShow：scope.slidesToShow！= NULL？ parseInt函数（scope.slidesToShow，10）：1，
        slidesToScroll：scope.slidesToScroll！= NULL？ parseInt函数（scope.slidesToScroll，10）：1，
        速度：scope.speed = NULL？ parseInt函数（scope.speed，10）：300，
        刷卡：scope.swipe ==假，
        touchMove：scope.touchMove ==假，
        touchThreshold：scope.touchThreshold？ parseInt函数（scope.touchThreshold，10）：5，
        垂直：scope.vertical ===真
      }）;
      返回范围。$表（CURRENTINDEX功能（的newval，OLDVAL）{
        如果（（CURRENTINDEX = NULL）及！及（的newval = NULL）及！＆安培;！==的newval CURRENTINDEX）{
          返回slider.slickGoTo（的newval）;
        }
      }）;
    }）;
  };
  如果（scope.initOnload）{
    将IsInitialized = FALSE;
    返回范围。$表（数据功能（的newval，OLDVAL）{
      如果（（的newval = NULL）及！＆安培;！将IsInitialized）{
        initializeSlick（）;
        返回将IsInitialized = TRUE;
      }
    }）;
  }其他{
    返回initializeSlick（）;
  }
}};}）;
 

解决方案

有被称为INIT-的onLoad属性，只要是真的。

 ＆LT;光滑的init-的onload =真实数据=awesomeThings＆GT;
  ...
＆LT; /光滑＆GT;
 

I user this programme github.com/vasyabigi/angular-slick. it is not working with dynamic data. it work only with static data. In dynamic data it show vertical image insted of horizontal with no Carouseling .Please help me. here is my diractive

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

解决方案

There's an attribute called init-onLoad, just make it true.

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

这篇关于油滑旋转木马在JSON数据角度JS不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！