Question

我有一个滑块，在指令中使用OwlCarousel 2。在旋转木马上，每个项目的内容将由翻译过滤器控制。

但是，当我拖动旋转木马时，内容将不会被翻译。相反，它们显示了最初的Angular标记。

有人可以帮我解决这个问题吗？或者给我任何解决方法？如果您需要任何更新或更多信息，请告诉我。

提前多多感谢！

＆＃13;

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');
}]);

＆＃13;

li {
  width:60%;
  height: 100px;
  border: 1px solid green;
}

＆＃13;

<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>

＆＃13;

角色翻译在OwlCarousel 2指令

0 个答案: