Ошибка с owl.carosusel в angularjs - PullRequest
Новая
       11

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

0 голосов
/ 30 мая 2018

Я использую эту директиву 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>

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

1 Ответ

0 голосов
/ 30 мая 2018

Я не могу заставить эту директиву работать.Я предполагаю, что, возможно, какой-то угловой кеш сохраняет элемент живым, даже когда 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/

...