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;
 }

我已尝试在onchange="setSelectedImage(slide.data)"中添加#my-carousel，但由于更改发生时幻灯片未知，因此无效。

我希望有人可以帮助我。

Answer 1

您无法使用ngChange，因为该指令未公开任何ngModel

来自ngChange文档

请注意，此指令要求存在ngModel。

但是您拥有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

似乎有效持有当前指数。您应该只能使用$ scope.active。

如何获得当前幻灯片索引：uib轮播

2 个答案: