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

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,