Угловой перевод не работает в директиве 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>