Angular js 轮播无法在缩略图之间切换

Question

这就是我对Angular UI旋转木马的看法，而我所抓住的就是使用我拥有的缩略图滑动。

 <div class="carousel">
                        <div style="height: 305px">
                            <div uib-carousel  active="slide.active"   interval="myInterval">
                                <div uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
                                    <img ng-src="{{slide.image}}" style="margin:auto;">
                                    <div class="carousel-caption">
                                        <h4>Slide {{slide.id}}</h4>
                                        <p>{{slide.text}}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-2" ng-repeat="slide in showThumbnails">
                                <img ng-src="{{slide.image}}" style="width:100%" ng-click="setActive(slide.id)">
                            </div>
                        </div>
                    </div>

这是我的控制器：

$scope.myInterval = 5000;
    $scope.thumbnailSize = 5;
    $scope.thumbnailPage = 1;
    var slides = $scope.slides = [];
    $scope.addSlide = function(i) {
      var newWidth = 600 + slides.length;
      slides.push({
        image: '//unsplash.it/' + newWidth + '/300',
        text: [
          'Nice image',
          'Awesome photograph',
          'That is so cool',
          'I love that'][slides.length % 4],
        id: i
      });
    };
    for (var i = 0; i < 4; i++) {
      $scope.addSlide(i);
    }
    $scope.showThumbnails = slides.slice(($scope.thumbnailPage - 1) *
        $scope.thumbnailSize, $scope.thumbnailPage * $scope.thumbnailSize);
    $scope.setActive = function(idx) {
      $scope.slides[idx].active = true;
    };

在我的控制器中，我有这个节目的缩略图，这是我获得拇指指甲的地方，我指出要有缩略图，但我无法获得滑动并使其变得活跃，因此它会更改。

Answer 1

 $scope.myInterval = 5000;
    $scope.thumbnailSize = 5;
    $scope.thumbnailPage = 1;
    var slides = $scope.slides = [];
    $scope.addSlide = function(i) {
      var newWidth = 600 + slides.length;
      slides.push({
        image: '//unsplash.it/' + newWidth + '/300',
        text: [
          'Nice image',
          'Awesome photograph',
          'That is so cool',
          'I love that'][slides.length % 4],
        id: i
      });
    };
    for (var i = 0; i < 4; i++) {
      $scope.addSlide(i);
    }
    $scope.showThumbnails = slides.slice(($scope.thumbnailPage - 1) *
        $scope.thumbnailSize, $scope.thumbnailPage * $scope.thumbnailSize);
    $scope.setActive = function (whatever) {
      $scope.active = whatever;
    };

那是我的工作视图：

<div class="carousel">
                    <div style="height: 305px">
                        <div uib-carousel  active="active"   interval="myInterval">
                            <div uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
                                <img ng-src="{{slide.image}}" style="margin:auto;">
                                <div class="carousel-caption">
                                    <h4>Slide {{slide.id}}</h4>
                                    <p>{{slide.text}}
                                </div>
                                {{active}}
                                {{slide.id}}
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2" ng-repeat="slide in showThumbnails">
                            <img ng-src="{{slide.image}}" style="width:100%" ng-click="setActive(slide.id)">
                        </div>
                    </div>
                </div>