ブートストラップUIタブ内で回転円盤機能が実行されない

Question

角度のためのブートストラップUIを使用して、表示するスライドのインデックスを収集する必要があります。これを使用して別のコンテナーにコンテンツを表示するためにデータを収集できます。

これに続いてexampleスライドのインデックスを記録できます。私自身の環境でそれを複製すると、うまくいきます。

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

タブ内のカルーセルをカプセル化しなければ、私は$watchを使用することができました：

私が午前問題は、私はそうのように、また、ブートストラップUIが提供するtabset内のカルーセルが挿入されているということですメソッドがactiveSlideにありますが、カルーセルはタブ内にありますが、これは失敗しています。

質問

どのように私は$タブセット内の '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

最初のプランナーリンクにはこの文法的なエラーがあります。そのため、ブートストラップUIの例を使用してもう1つ作成しました。

私はtabsetのピルのデモ内の回転式デモに収まりました。 $scope.$watch('activeSlide'...が失敗しました。しかし、ありがたいことに、この具体的なシナリオはこれまでにstackoverflow questionで答えられました。

私はちょうど彼らの提案に従って、彼らの指示を試しました。現在、すべてのスライドの変更はon-carousel-change="onSlideChanged(nextSlide, direction)"によって監視されます。下のプランカのコンソールをチェックして好きなように遊んでみることができます。

ここに役立ちますplunker

ホープです！