0

我正在使用 angularjs 并想在页面上显示/隐藏轮播。根据页面上的事件，我想删除并稍后再次使用一组不同的图像显示轮播。以下指令用于初始加载轮播。我试图将 angular 的显示/隐藏与 Elastislide 的 add() 函数结合使用。

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

编辑可能 add() 不适合我正在尝试做的事情。我相信一个更好的设计将是有一个钩子来移除轮播和另一个钩子来用一组新的数据重新初始化 elastislide 插件。

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>
4

1 回答 1

0

如果你想在 AngularJS 应用上轻松实现轮播，ng-carousel很方便。

于 2014-04-15T11:33:35.517 回答