在angular-ui bootstrap轮播之外获取活动幻灯片索引

Question

我有一个获得活动幻灯片在角UI引导的问题carousel 之外的carousel.
我有一个面板,里面有旋转木马,并希望将按钮放在面板的页脚中,使用所选幻灯片进行操作,但使用jquery选择器不是一个选项.

我想用纯角度的东西来实现它.
我想我可以使用active属性,但也许有一些聪明的东西可以更顺利地完成.

一些代码(Jade语法):

.panel.panel-info
  .panel-body
    carousel.imgCarousel(interval='5000')
      slide(ng-repeat='media in selCard.superviseTab.media')
        img.img-responsive(preload-image ng-src='/api/cards/{{selCard.superviseTab.sID}}/media/{{$index}}')
        .carousel-caption
          multiSelect
          h4 Slide {{$index+1}} of {{selCard.superviseTab.media.length}}
          p {{media.originalFilename}}
  .panel-footer
    .navbar-collapse.collapse
      ul.nav.navbar-nav.navbar-left
        li
          a.btn.btn-danger
            i.fa.fa-unlink

Answer 1

如果您查看AngularUI文档,您可以看到幻灯片是如何集成到HTML中的:

<carousel interval="myInterval">
  <slide ng-repeat="slide in slides" active="slide.active">
    ...
  </slide>
</carousel>

我们可以看到活动幻灯片由active每张幻灯片上的属性决定.
因此,您应该能够遍历幻灯片并返回带有活动属性的第一张幻灯片.只要您没有在slides此轮播之外修改数组,它就应该为您提供当前幻灯片的索引.

例如,类似于:

function isActive(slide) {
  return slide.active;
};
$scope.getActiveSlide = function() {
  var activeSlides = $scope.slides.filter(isActive)[0]; 
  //return the first element, since the array should only return one item
};

应该做的工作(或者你选择实现你的find功能).