Question

我正在使用angularjs，并希望在页面上显示/隐藏轮播。基于页面上的事件，我想删除并稍后再显示带有一组不同图像的轮播。以下指令适用于初始加载轮播。我试图将角度显示/隐藏与Elastislide的add（）功能结合使用。

在以下代码中，轮播初始化并按预期工作。问题是当收到广播消息以更新轮播时，对$ scope.images的任何更改都会导致轮播中的所有图像消失。随后，carousel.add（）什么都不做。

编辑可能add（）不适合我尝试做的事情。我相信一个更好的设计是有一个钩子来移除轮播和另一个钩子，用一组新的数据重新初始化弹性滑动插件。

myModule.directive('myCarousel', ['$compile', function($compile) {

var carousel;

var linker = function(scope, element, attrs) {

    scope.$watchCollection('images.length', function () {
        if (! carousel) {
            carousel = element.elastislide();
        } else {
            carousel.add();
        }
    });

};

var controller = function ($scope) {

    $scope.$on('updateCarousel', function(evt, imgs) { 
        $scope.images.push({src: "./Elastislide/images/small/20.jpg", alt: "image20"})
    });

    $scope.images = [
        { src : "./Elastislide/images/small/1.jpg", alt : "image01" },
        { src : "./Elastislide/images/small/2.jpg", alt : "image02" }];

};

return {
    restrict : 'A',
    link : linker,
    controller : controller
};
}]);

使用以下标记

    <ul my-carousel id="carousel" class="elastislide-list">
        <li ng-repeat="img in images"><a href="#"><img src="{{img.src}}" alt="{{img.alt}}" /></a></li>
    </ul>

Answer 1

如果您想轻松地在AngularJS app上实现轮播，ng-carousel很方便。

如何使用新的图像集重新初始化Elastislide轮播 - 使用angularjs

1 个答案: