How do you Bind to Angular-UI's Carousel Slide Events?

Question

I'm using Angular-UI's carousel and I need to tell my google charts to redraw after they have slid into view. In spite of what I've read, I can't seem to hook into the event.

See my attempt: http://plnkr.co/edit/Dt0wdzeimBcDlOONRiJJ?p=preview

HTML:

<carousel id="myC" interval="myInterval">
  <slide ng-repeat="slide in slides" active="slide.active">
    <img ng-src="{{slide.image}}" style="margin:auto;">
    <div class="carousel-caption">
      <h4>Slide {{$index}}</h4>
      <p>{{slide.text}}</p>
    </div>
  </slide>
</carousel>

On document load:

$('#myC').live('slid.bs.carousel', function (event) { console.log("slid"); } );

It should work something like this: http://jsfiddle.net/9fwuq/ - non-angular-ui carousel

Perhaps there is a more Angular way to hook into the fact that my chart has slid into view?

Answer 1

There are 3 ways I can think of and that depends of your requirement.

Please see http://plnkr.co/edit/FnI8ZX4UQYS9mDUlrf6o?p=preview for examples.

1. use $scope.$watch for an individual slide to check if it is become active.

   $scope.$watch('slides[0].active', function (active) {
     if (active) {
       console.log('slide 0 is active');
     }
   });
   

2. use $scope.$watch with custom function to find an active slide.

   $scope.$watch(function () {
     for (var i = 0; i < slides.length; i++) {
       if (slides[i].active) {
         return slides[i];
       }
     }
   }, function (currentSlide, previousSlide) {
     if (currentSlide !== previousSlide) {
       console.log('currentSlide:', currentSlide);
     }
   });
   

3. use a custom directive to intercept select() function of the carousel directive.

   .directive('onCarouselChange', function ($parse) {
     return {
       require: 'carousel',
       link: function (scope, element, attrs, carouselCtrl) {
         var fn = $parse(attrs.onCarouselChange);
         var origSelect = carouselCtrl.select;
         carouselCtrl.select = function (nextSlide, direction) {
           if (nextSlide !== this.currentSlide) {
             fn(scope, {
               nextSlide: nextSlide,
               direction: direction,
             });
           }
           return origSelect.apply(this, arguments);
         };
       }
     };
   });
   

   and use it like this:

   $scope.onSlideChanged = function (nextSlide, direction) {
       console.log('onSlideChanged:', direction, nextSlide);
   };
   

   and in html template:

   <carousel interval="myInterval" on-carousel-change="onSlideChanged(nextSlide, direction)">
   ...
   

Hope this help : )