Почему с ng-repeat не работает галерея(Slick) на Angularjs?

Question

[whatislove]

1. Использую slick-angularjs галерею (vasyabigi.github.io/angular-slick/).
JQuery никакого нет!!!
2. Слайдер отлично работает вот так:

<slick>
           <div>
                     <img src="{{bikes.gallery[0]}}" alt="">
          </div>
           <div>
                     <img src="{{bikes.gallery[1]}}" alt="">
          </div>
           <div>
                       <img src="{{bikes.gallery[2]}}" alt="">
          </div>
    </slick>

3. И никак не работает вот так : (т.е. сами картинки выводит, но ломается полностью плагин)
Никаких ошибок в консоле.

<slick>
      <div ng-repeat="bikes in bike.gallery">
	      <img ng-src="{{ bikes }}" alt="">
      </div>
    </slick>

4. Я подозреваю, что это как то связано с областью видимости, но что и как не могу понять.
Помогите решать задачу!!!
Всем заранее большое спасибо!!!

Comments

[Yaroslav Lyzlov]

А как мы поймём? Код в студию.

[whatislove]

Yaroslav Lyzlov: Проблема как мне кажется связана с ng-repeat, директива по моему создает какую-то свою область видимости, я пока не пойму. Какой еще нужен код, я сброшу?

[Yaroslav Lyzlov]

Выложите пример неработающего кода сюда
codepen.io

Answer 1

[Yaroslav Lyzlov]

Добавьте атрибут в slick
Вот так <slick init-onload="true", data="bikes"></slick>

Попробуйте и отпишитесь.

Answer 2

[Alex]

JQuery никакого нет!!!
Странно что в документации к Slick он указан в подключаемых...

Вообще судя по github Slick проблема известная
Вот одно из решений.... stackoverflow.com/questions/31108573/angular-slick...
Вот тут несколько https://github.com/vasyabigi/angular-slick/issues/105

Судя по всему просто картинки не успевают загрузиться и ng-repiat отработать, а директива уже делает свое черное дело...

Answer 3

[SerzN1]

С каких пор это вдруг стало равнозначным?

{{bikes.gallery[0]}}
и

<div ng-repeat="bikes in bike.gallery">
<img ng-src="{{ bikes }}" alt="">
</div>

Должно быть как то так:

<div ng-repeat="bike in bikes.gallery">
<img ng-src="{{ bike }}" alt="">
</div>

*здесь смайлик держащийся за голову*