如何获取当前幻灯片索引：uib carousel

Question

我想获取当前幻灯片索引 onChange 而不是 onClick 但我不知道该怎么做。

首先，我用 ng-click 得到了它，像这样：

在.html:

<ul uib-carousel id="myCarousel" active="active" no-wrap="noWrapSlides"
        style="background-color: #0a0a0a; height:100%; width:100%; padding: 0">
        <li id="mySlides" uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id"
            style="background-color: #0a0a0a; height: 100%;width: 100%;">
            <img ng-src="{{slide.imageUrl}}" ng-click="setSelectedImage(slide.data)" style="background-color: #0a0a0a; height: 100%;width: 100%; max-height: 640px; max-width: 800px"/>

        </li>
    </ul>

并且在 .js 中：

 $scope.myInterval = 5000;
 $scope.noWrapSlides = false;
 $scope.active = 0;
 var currIndex = 0;
 var slides = $scope.slides = [];

 $scope.addSlide = function(media,data) {
      slides.push({
          imageUrl: $scope.urlWsImg+media.mediaId+"/stream/800",
          id: currIndex++,
          data:data
      });
 };

 $scope.addSlide($scope.currentImage.media,$scope.currentImage);//bootstrap
 for(var i=0;i<enrichedImages.length;i++) {
    var enrichedImage=enrichedImages[i];
    $scope.addSlide(enrichedImage.previewImage,enrichedImage);
 }
 $scope.setSelectedImage =function(imageUrl){
     $scope.currentEnrichedImage=imageUrl;
 }

我试过在 #my-carousel 中放置一个 onchange="setSelectedImage(slide.data)"，但它不起作用，因为发生更改时幻灯片是未知的。

希望有人能帮助我。

Answer 1

您不能使用 ngChange 因为该指令不公开任何 ngModel

来自 ngChange 文档

Note, this directive requires ngModel to be present.

但是你有 active 属性你可以 $watch

$scope.$watch('active', function(newIndex, oldIndex) {
    if (Number.isFinite(newIndex) && newIndex!==oldIndex) {
        // invoke your function here
    }
});

Here is a forked plunk

Answer 2

好像是active在持有当前指数。你应该可以只使用 $scope.active.

如何获取当前幻灯片索引：uib carousel

how to get current slide index: uib carousel

carousel

angular-ui-bootstrap