Question

我目前有以下代码：

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

Answer 1

Angular不太可能在数组中显示更多项目。首先，确保您的数据干净。

我相信你的问题的根源是在指令和rootScope中。很可能您需要在rootScope上满足条件时进行检查，或者“carouselRenderer”的范围不在“cardNotifier”的范围内。即。

if (scope.$parent.$last)

您想要父范围中的最后一个重复项目。

另外，作为旁注，请确保您的CSS课程位于正确的位置。为什么旋转木马渲染器上的“事件卡”而不是生日卡？

Angularjs ng-repeat渲染的项目多于数组中的项目

1 个答案: