javascript - AngularJs Jcarousel 实现仅在 pageresize 后有效

Question

我这里有个奇怪的问题。我采用了对我而言最合适的 JCarousel 示例 (http://sorgalla.com/jcarousel/examples/responsive/)，并从中创建了一个 Angular 指令。

到目前为止一切顺利，它基本上可以工作，但我必须先触发一个框架/窗口调整大小，否则 JS 会给我一个控制台错误:

未捕获类型错误:无法读取 null 的属性“索引”- jquery.jcarousel.js:521

我在这里编写了一个 smiplyfied jsfiddle，您可以在其中重现该问题。一旦您在“结果”框架或整个窗口上触发调整大小，轮播将像魅力一样工作:

http://jsfiddle.net/nbtw3cnk/4/

我完全不知道如何解决这个问题，有什么建议吗？

提前致谢!

约翰

AngularJs 的 JCarousel 指令:

var carousel = function () {
    return {
        restrict: 'A',
        replace: true,
        transclude: false,
        scope: {
            images: "="
        },
        template: '<div class="jcarousel-wrapper"><div class="jcarousel"><ul><li ng-repeat="img in images"><!--<img ng-src="{{img.imageKey}}" />-->{{img.imageKey}}</li></ul></div><a href="#" class="jcarousel-control-prev">&lsaquo;</a><a href="#" class="jcarousel-control-next">&rsaquo;</a></div>',
        link: function link(scope, element, attrs)
        {
            var jcarousel = $('.jcarousel');

            jcarousel.jcarousel({
                    wrap: 'circular'
                });

            $('.jcarousel-control-prev')
                .jcarouselControl({
                    target: '-=1'
                });

            $('.jcarousel-control-next')
                .jcarouselControl({
                    target: '+=1'
                });
        }
    }
};

Answer 1

当images属性真正绑定(bind)成功后，需要重新加载。调用重新加载是调整浏览器窗口大小的副作用。这就是为什么您的轮播在调整大小后可以正常工作的原因。

您还应该避免在 Angular Directive(指令)中使用 jQuery 类选择器。当您的指令的多个实例位于同一页面上时，它可能会导致问题。这是您的指令的修改后的工作版本(jsfiddle):

angular.module('testApp', []).directive('carousel', carousel);

function carousel() {
    return {
        restrict: 'A',
        replace: true,
        transclude: false,
        scope: {
            images: "="
        },
        template: '<div class="jcarousel-wrapper"><div class="jcarousel"><ul><li ng-repeat="img in images"><!--<img ng-src="{{img.imageKey}}" />-->{{img.imageKey}}</li></ul></div><a href="javascript:void(0)" class="jcarousel-control-prev">&lsaquo;</a><a href="javascript:void(0)" class="jcarousel-control-next">&rsaquo;</a></div>',
        link: function link(scope, element, attrs) {
            var container = $(element);
            var carousel = container.children('.jcarousel')

            carousel.jcarousel({
                wrap: 'circular'
            });

            scope.$watch(attrs.images, function (value) {
                carousel.jcarousel('reload');
            });

            container.children('.jcarousel-control-prev')
                .jcarouselControl({
                target: '-=1'
            });

            container.children('.jcarousel-control-next')
                .jcarouselControl({
                target: '+=1'
            });
        }
    }
};

编辑:请注意，上面的代码使用了 jQuery 的 $() 语法。通常，您会希望在 Angular 应用程序中使用 angular.element()。如果最初引入 Angular 时 jQuery 存在，angular.element() 将只是 $() 的别名。但是，jsFiddle 在包含 jQuery 之前包含了 angular。因此，angular 依赖于 jqLit​​e，它不理解 .jcarousel()。

编辑 2:更新了下一个/上一个 href 以与哈希路由很好地配合。