0

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');
    }
});
Patrick McDermott
  • 1,220
  • 1
  • 15
  • 30

1 Answers1

1

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!

syciphj
  • 986
  • 5
  • 11
  • Thank you for your time. I can see it showing the ID , though I am having issues with my own code and not being able to display the correct $index. I'll have a play around – Patrick McDermott Sep 13 '17 at 16:13
  • Just to help you get the correct index of the slide on change, I edited the [plunker](https://plnkr.co/edit/AIS7QnCvlCTmUXHTPnRq?p=preview). Just modify the directive to see if you can get what you need out of the element. Hope that helps. – syciphj Sep 13 '17 at 16:23
  • Thank you. I have got it, and ids are being generated but instead of resetting, the ids keep increasing. I'll have a look now – Patrick McDermott Sep 13 '17 at 16:29
  • All sorted now. Thank you @henrisycip – Patrick McDermott Sep 14 '17 at 10:09
  • Care to share the errors and a fiddle/plunker/codepen? – syciphj Sep 15 '17 at 02:40