CODEWITHSUNDEEP
javascriptangularjsangular-ui-bootstrap
Patrick McDermott
Patrick McDermott

Reputation: 1220

Bootstrap UI Carousel function wont run within tab

Using Bootstrap UI for Angular, I need to gather the index of the slide being displayed, which I can then use to gather data in order to display content in a separate container.

Following this exact example I can log the index of the slide. And when I replicate it in my own environment, it works.

The issue I am having is that I have inserted the carousel within a tabset also provided by Bootstrap UI, like so:

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

Without encapsulating the carousel within the tabs, I was able to use the $watch method on the activeSlide, but now the carousel is within the tabs, it is failing to do so.

Question

How do I $watch for change on 'activeSlide' within the tabset?

$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');
    }
});

Upvotes: 0

Views: 123

Answers (1)

syciphj
syciphj

Reputation: 996

Your initial plunker link has this weird syntax error, so I made another one using the Bootstrap UI examples.

I fit in the carousel demo within the tabset pill demo.$scope.$watch('activeSlide'... did fail. But thankfully this specific scenario has been answered before in this stackoverflow question.

So I just followed their suggestions and tried out their directive. Now every slide change is monitored by on-carousel-change="onSlideChanged(nextSlide, direction)". You can check the console of the plunker below and play around with it however you like.

Here's the plunker

Hope that helps!

Upvotes: 1

Related Questions