Bootstrap UI 选项卡内的轮播功能不会 运行

Question

使用 Bootstrap UI for Angular，我需要收集正在显示的幻灯片的索引，然后我可以使用它来收集数据以便在单独的容器。

完全按照这个 example 我可以记录幻灯片的索引。当我在自己的环境中复制它时，它就起作用了。

我遇到的问题是我在 tabset 中插入了转盘，该 tabset 也由 Bootstrap UI 提供，如下所示：

<uib-tabset active="activePhaseTab" type="pills">
  <uib-tab heading="Blue" index="3" ng-click="$ctrl.phaseSlide = 3;$ctrl.phaseSliderInfo($ctrl.phaseSlide)">
   <div style="height: 305px">
     <div uib-carousel active="activeSlide" interval="myInterval" no-wrap="noWrapSlides">
       <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>       
  </uib-tab>
</uib-tabset>

在没有将轮播封装在选项卡中的情况下，我能够在 activeSlide 上使用 $watch 方法，但是现在轮播在选项卡中，它无法做到这一点。

问题

如何 $watch 选项卡集中 'activeSlide' 的变化？

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

$scope.addSlide = function() {
    var newWidth = 600 + slides.length + 1;
    slides.push({
      image: '//unsplash.it/' + newWidth + '/300',
      text: ['Nice image','Awesome photograph','That is so cool','I love that'][slides.length % 4],
      id: currIndex++
    });
};

for (var i = 0; i < 4; i++) {
    $scope.addSlide();
}

$scope.$watch('activeSlide', function (active) { //SHOULD LOG THE ACTIVE SLIDE
    if(active !== undefined) {
        console.log(active)
        console.log('slide ' + active + ' is active');
    }
});

Answer 1

你最初的 plunker link 有这个奇怪的语法错误，所以我用 Bootstrap UI 的例子做了另一个。

我在 tabset pill 演示中安装了轮播演示。$scope.$watch('activeSlide'... 确实失败了。但值得庆幸的是，此特定场景之前已在 Whosebug question.

中得到解答

所以我只是听从了他们的建议并尝试了他们的指令。现在每个幻灯片更改都由 on-carousel-change="onSlideChanged(nextSlide, direction)" 监控。您可以查看下面的 plunker 控制台，并随心所欲地使用它。

这是plunker

希望对您有所帮助！