hiding/showing angular-ui bootstrap carousel

[s***@gophigital.com]

Hi,

I've been using angular for a while, but openly admit my knowledge of
directive in particular is not the strongest.

I'm making a site that involves a page where some images are to be
displayed in a carousel, but at times the carousel's containing div is
hidden and then re-shown (using ng-show) in a tab-like setup. Usually this
works fine, however sometimes when the carousel is hidden and then
re-shown, it no longer auto scrolls and the navigation arrows don't do
anything when clicked. However, the indicators work, and when one of them
is clicked, it switches the slider to that page. After that, the auto
scrolling starts working again, and the navigation arrows function as well.

The thing that is displayed in the other tab is a google map. Not sure if
this would have an effect, but might be worth mentioning.

I'm loading AngularJS 1.0.6, and ui-bootstrap-custom-tpls-0.4.0.js for the
ui bootstrap part (just the carousel).

As I mentioned, I'm not that adept with directives, so I'm not sure why
this is happening, but any advice or suggestions would be much appreciated.


Thanks very much,
Steve

[Karch McCoy]

I was having this same problem too. I think it is caused by the
$scope.$currentTransition holding onto it's previous transition when the
carousel is hidden (at least that is what seems like is happening as the
$scope.next function is called whenever I show the carousel). I ended up
solving it by mimicking what was done here:
https://github.com/angular-ui/bootstrap/pull/196/files

Basically, I tied the new paused attribute directly to something in the
scope that would be true when I wanted the carousel hidden, that way it
would pause (and cancel the currentTimeout). I think that cancelling the
timeout also causes the $currentTransition to be null, which will allow
next() (or prev()) to transition to the next slide.

I feel like there is probably a better way to do this, if so, I would love
to know what it is.

Post by s***@gophigital.com
Hi,
I've been using angular for a while, but openly admit my knowledge of
directive in particular is not the strongest.
I'm making a site that involves a page where some images are to be
displayed in a carousel, but at times the carousel's containing div is
hidden and then re-shown (using ng-show) in a tab-like setup. Usually this
works fine, however sometimes when the carousel is hidden and then
re-shown, it no longer auto scrolls and the navigation arrows don't do
anything when clicked. However, the indicators work, and when one of them
is clicked, it switches the slider to that page. After that, the auto
scrolling starts working again, and the navigation arrows function as well.
The thing that is displayed in the other tab is a google map. Not sure if
this would have an effect, but might be worth mentioning.
I'm loading AngularJS 1.0.6, and ui-bootstrap-custom-tpls-0.4.0.js for the
ui bootstrap part (just the carousel).
As I mentioned, I'm not that adept with directives, so I'm not sure why
this is happening, but any advice or suggestions would be much appreciated.
Thanks very much,
Steve