javascript - AngularJs Jcarousel 实现仅在 pageresize 之后才起作用

Question

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

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

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

我在这里编写了一个 smilyfied 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，以便与哈希路由很好地配合。