Ошибка с owl.carosusel в angularjs

Question

Я использую эту директиву owl.carousel. Идея моего приложения состоит в том, чтобы получить список элементов, когда пользователь нажимает на каждый элемент, я открываю модальное окно, в котором отображается список элементов в зависимости от идентификатора. в первый раз, когда я щелкаю по первому элементу, карусель отображается правильно, после этого я закрываю модал и перехожу, чтобы щелкнуть по второму элементу, и там карусель выходит из строя.

это мой код:

$scope.item_click = function(id){
  ServGetItemsById.servicioGetItemsById(id).success(function(data, status){
    $scope.all_items = data.items;
    var modal = document.getElementById('modal');
    modal.style.display = "block";
  })
  .error(function(data, status){            
  })
  .finally(function(){})
}

мой HTML

<data-owl-carousel class="owl-carousel" data-options="owlOptionsTestimonials">
  <div owl-carousel-item="" ng-repeat="i in all_items" class="item">
    <img src="{{i.img}}"/>
    <div>
      <p class="white-text center">{{i.name}}</p>
    </div>
  </div>
</data-owl-carousel>

заранее спасибо

Answer 1

Я не могу заставить эту директиву работать. Я предполагаю, что, возможно, некоторый угловой кэш поддерживает элемент в рабочем состоянии, даже когда initCarousel многократно срабатывает. Может быть, у какой-то более старой версии angular такой проблемы нет?

В любом случае вы всегда можете удалить элемент и заставить директиву создать новый. ng-if в помощь:

<div ng-if="all_items.length > 0">
  <data-owl-carousel class="owl-carousel" data-options="owlOptionsTestimonials">
    <div owl-carousel-item="" ng-repeat="i in all_items" class="item">
      ...
    </div>
  </data-owl-carousel>
</div>

И в контроллере.

// Remove items before fetching new ones to triggers the ng-if.
$scope.all_items = []; 
ServGetItemsById.servicioGetItemsById(id).success(function(data, status){
...

Это побеждает смысл этой директивы imho, но что ты делаешь, а? И на этот раз я попробовал! http://jsfiddle.net/k988Loru/