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

Answer 2

AngularUI Bootstrap has changed naming conventions for controllers as thery have prefixed all of their controllers with prefix uib, so below is the updated solution of the original solution provided by runTarm:

Angular:

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

Angular with TypeScript:

module App.Directive {

    export class CarouselChange implements ng.IDirective {

        public require: string = '^uibCarousel';

        constructor(private $parse: ng.IParseService) { }

        public link: ng.IDirectiveLinkFn = (scope: ng.IScope, element: ng.IAugmentedJQuery, attributes: any, carouselCtrl: any) => {
            var fn = this.$parse(attributes.carouselChange);
            var origSelect = carouselCtrl.select;
            carouselCtrl.select = function(nextSlide, direction) {
                if (nextSlide !== this.currentSlide) {
                    fn(scope, {
                        nextSlide: nextSlide,
                        direction: direction
                    });
                }
                return origSelect.apply(this, arguments);
            };
        }

        static Factory(): ng.IDirectiveFactory {
            var directive: ng.IDirectiveFactory = ($parse: ng.IParseService) => new CarouselChange($parse);
            directive['$inject'] = ["$parse"];
            return directive;
        }
    }
}

Thanks,