angularjs - angular ui.bootstrap.carousel 从 $scope 调用 next()/prev()

Question

如何从幻灯片访问轮播的 next()/prev() 方法？我正在尝试连接到 hm-swipe-left/right，但我似乎没有正确的 $scope

<carousel interval="1000">
  <slide ng-repeat="card in slides" 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>
      </ul>
    </div>
  </slide>
</carousel>

Answer 1

我一直在寻找解决方案。我将发布我最终所做的事情:

在你有旋转木马的 Controller 中(确保你的 html 旋转木马有 id="myCarousel"):

$scope.showNext = function(){
    var index = ($('#myCarousel .active').index()+1)%(slides.length);
    var modIndex = (((index)%(slides.length))+(slides.length))%(slides.length);
    $scope.slides[modIndex].active=true;
}
$scope.showPrev = function(){
    var index = ($('#myCarousel .active').index()-1)%(slides.length);
    var modIndex = (((index)%(slides.length))+(slides.length))%(slides.length);
    $scope.slides[modIndex].active=true;
}

然后在您的 HTML 页面中:

<img ng-src="{{slide.image}}" style="margin:auto;" ng-swipe-right="showPrev()" ng-swipe-left="showNext()">

希望对大家有帮助!它适用于 bootstrap 3.0.2(我的版本)

编辑:编辑模数(因为计算模数时 javascript 中存在错误:Javascript modulo not behaving)现在可以了! :)