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

john.duprey
john.duprey
in TR Internal
I've posted this on [stackoverflow][1], but maybe someone here knows... 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][2] HTML:

Slide {
{$index}}

{
{slide.text}}

On document load: $('#myC').live('slid.bs.carousel', function (event) { console.log("slid"); } ); It should work something like this: [
http://jsfiddle.net/9fwuq/][3] - non-angular-ui carousel Perhaps there is a more angular way to hook into the fact that my chart has slid into view? [1]:
http://stackoverflow.com/questions/24686119/angular-ui-carousel-slide-events [2]:
http://plnkr.co/edit/Dt0wdzeimBcDlOONRiJJ?p=preview [3]:
http://jsfiddle.net/9fwuq/
Tagged:

Best Answer

Answers

  • Josh Harris
    Josh Harris
    There are a few possiblities here. The easy way out and just bind a jQuery event to the next/previous buttons. This does not prevent against multiple clicks while the transition is happening, but you could probably add some checks around the transition classes help out with that. // Hacky shiz $(".carousel-control").on("click", function () { console.log("hacky slide"); }); You could add a $broadcast event to the select action (after the check for already in progress). Then submit a pull request to ui.bootstrap and hope they take it. I think you could also extend the directive and add some sort of binding or watch to the link function. I haven't tested this out though.
  • john.duprey
    john.duprey
    Thanks, Josh. Unfortunately, this won't work when auto-slide is on.
  • Tampong Yooyen
    Tampong Yooyen
    Ah ha! you also asked here. BTW we are in the same company actually :)

Categories