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 e

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:

   
   ...
   

Hope this help : )