Карандаш с линией Angular JS

Я использую Slick карусель в одном из AngularJS. Для этого я создал директиву следующим образом:

  myApp.directive('slickSlider',function(){
   return {
     restrict: 'A',
     link: function(scope,element,attrs) {
       $(element).slick(scope.$eval(attrs.slickSlider));
   }
  }
 });

Вот мой код в файле вида:

  <div class="clearfix"  
  slick-slider="{dots: false, arrows: true, draggable: 
  false, slidesToShow:3, infinite:false}">
              <div class="my-slide">
                  <a><img ng-src="assets/img/img1.png"/></a>
              </div>
              <div class="my-slide">
                  <a><img ng-src="assets/img/img1.png"/></a>
              </div>
              <div class="my-slide">
                  <a><img ng-src="assets/img/img1.png"/></a>
              </div>
              <div class="my-slide">
                  <a><img ng-src="assets/img/img1.png"/></a>
              </div>
              <div class="my-slide">
                  <a><img ng-src="assets/img/img1.png"/></a>
              </div>
              <div class="my-slide">
                  <a><img ng-src="assets/img/img1.png"/></a>
              </div>
    </div>

В этом случае он нормально работает и инициализируется.

Но когда я создаю слайды динамически, используя ngRepeat, он не инициализирует и не показывает слайды один за другим.

Вот мой код, используя ngRepeat

<div class="clearfix"  
  slick-slider="{dots: false, arrows: true, draggable: 
  false, slidesToShow:3, infinite:false}">
      <div class="my-slide" ng-repeat="slide in slides">
         <a><img ng-src="assets/img/{{slide.img}}"/></a>
       </div>
 </div>

Любое предложение, как я могу его решить?

Ответ 1

Я подозреваю, что для плавного плагина может потребоваться, чтобы DOM полностью отображался для правильной работы.

Попробуйте:

myApp.directive('slickSlider',function($timeout){
 return {
   restrict: 'A',
   link: function(scope,element,attrs) {
     $timeout(function() {
         $(element).slick(scope.$eval(attrs.slickSlider));
     });
   }
 }
});

Ответ 2

$timeout все еще не дал данным достаточно времени для инициализации для моего сценария, поэтому я изменил директиву немного больше, чтобы следить за тем, чтобы данные содержали контент (это также может иметь эффект перезаписи при изменении данных, а не как только DOM инициализирует onLoad, если вы измените использование isInitialized):

app.directive('slickSlider', function () {
    return {
        restrict: 'A',
        scope: {'data': '='},
        link: function (scope, element, attrs) {
            var isInitialized = false;
            scope.$watch('data', function(newVal, oldVal) {
                if (newVal.length > 0 && !isInitialized) {
                    $(element).slick(scope.$eval(attrs.slickSlider));
                    isInitialized = true;
                }
            });
        }
    }
});

Таким образом, angularJS наблюдает за загружаемыми данными и только захватывает пятно, когда данные имеют длину.

(требуется бит btw $, а не $наблюдать, потому что атрибут "data" не использует интерполяцию ( "{{...}}" ). Посмотрите этот отличный ответ, если вы хотите получить понижение на этом.)

использование:

<div class="clearfix" data="slides" 
    slick-slider="{dots: false,
                   arrows: true,
                   draggable: false,
                   slidesToShow:3,
                   infinite:false}">
    <div class="my-slide" ng-repeat="slide in slides">
        <a><img ng-src="assets/img/{{slide.img}}"/></a>
    </div>
</div>

благодаря так ответьте и этот github, который я получил от этот вопрос