В настоящее время у меня есть следующий код:
<div class="carousel" ng-if="novedadesEmpleados.cumpleanosDeHoy.length">
<div ng-repeat="empleado in novedadesEmpleados.todaysBirthdays" carousel-renderer class="event-card">
<birthday-card empleado="empleado" card-notifier></birthday-card>
</div>
</div>
Который работал нормально, пока я не переключился с использования Bootstrap Carousel на Tiny Slider .
В массиве в настоящее время есть 2 элемента, однако HTML отображает 6, 4 oh, которые просто показывают текст angularjs по умолчанию (имя свойств в фигурных скобках), а другие 2 отображают правильную информацию.
Что может быть причиной этого?Две директивы используются для вызова инициализатора Tiny Slider после завершения рендеринга:
angular.module('PortalIntranet').directive('cardNotifier', function ($timeout) {
return function(scope, element, attrs){
if(scope.$last)
scope.$emit('FinishedRendering');
}
});
angular.module('PortalIntranet').directive('carouselRenderer', function ($timeout) {
return function (scope, element, attrs) {
scope.$on('FinishedRendering', function (event) {
var slider = tns({
container: '.card-slider',
autoplay: true,
slideBy: 'page',
autoplayTimeout: 3500,
speed: 750,
autoplayButton: false,
nav: false,
autoplayButtonOutput: false,
controls: false
});
console.log(slider);
});
}
});