Угловой перевод не работает в директиве OwlCarousel 2

У меня есть слайдер, использующий OwlCarousel 2 в директиве. На карусели содержимое каждого элемента будет контролироваться фильтром перевода.

Но когда я перетаскиваю карусель, содержимое не будет переведено. Вместо этого они показывают начальную угловую разметку.

Может ли кто-нибудь помочь мне исправить это? Или дать мне какие-нибудь способы обойти? Если вам нужно какое-либо обновление или дополнительную информацию, пожалуйста, дайте мне знать.

Заранее большое спасибо!

var app = angular.module('app', ['pascalprecht.translate']);

sliderDirective.$inject = [];
function sliderDirective() {
  return {
    'restrict': 'A',
    'scope': {},
    'link': function(scope, element) {
      var owl = $(element).owlCarousel({
        items: 1,
        loop: true
      });
    }
  };
}
app.directive('slider', sliderDirective);

app.config(['$translateProvider', function ($translateProvider) {
  $translateProvider.translations('en', {
    'TITLE': 'Hello',
    'FOO': 'This is a paragraph'
  });
 
  $translateProvider.translations('de', {
    'TITLE': 'Hallo',
    'FOO': 'Dies ist ein Absatz'
  });
 
  $translateProvider.preferredLanguage('en');
}]);
li {
  width:60%;
  height: 100px;
  border: 1px solid green;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate/2.15.2/angular-translate.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.js"></script>

<body ng-app="app">

 <ul slider class="owl-carousel owl-theme">
  <li class="item">{{'TITLE' | translate}}</li>
  <li class="item">Item</li>
  <li class="item">Item</li>
 </ul>
</body>

0 ответов

Другие вопросы по тегам