本文介绍了angular ui.bootstrap.carousel 从 $scope 调用 next()/prev()的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何从幻灯片访问轮播的 next()/prev() 方法?我正在尝试连接到 hm-swipe-left/right,但我似乎没有正确的 $scope
<slide ng-repeat="幻灯片中的卡片" active="card.active"><div class="card list-unstyled text-center"><ul class='header list-inline list-unstyled'hm-swipe-left="swipe('next')"hm-swipe-right="swipe('prev')"><li><i class="icon {{card.icon}} fa-3x"></i></li><li class="title">{{card.title}}</li>
</幻灯片></轮播>
解决方案
这里有一个稍微简单的解决方案:
Javascript 控制器
$scope.carouselNext = function() {$('#carousel-main').carousel('next');}$scope.carouselPrev = function() {$('#carousel-main').carousel('prev');}
HTML 视图
<!-- 指标--><ol class="carousel-indicators"><li data-target="#carousel-main" data-slide-to="0" class="active"></li><li data-target="#carousel-main" data-slide-to="1"></li><!-- 为添加的任何幻灯片添加指示符 --></ol><!-- 幻灯片包装器--><div class="carousel-inner" role="listbox"><div id="slide1" class="item active" ng-swipe-right="carouselPrev()" ng-swipe-left="carouselNext()"><!-- img 或这里的内容-->
<div id="slide2" class="item" ng-swipe-right="carouselPrev()" ng-swipe-left="carouselNext()"><!-- img 或这里的内容-->