Skip to content
This repository was archived by the owner on May 29, 2019. It is now read-only.

Problem with carousel after hiding and showing #1513

Closed
uriva opened this issue Jan 3, 2014 · 5 comments
Closed

Problem with carousel after hiding and showing #1513

uriva opened this issue Jan 3, 2014 · 5 comments
Labels
component: carousel type: bug
Milestone
0.13.0 (AngularJS...

Comments

@uriva
Copy link

uriva commented Jan 3, 2014

Hi there,
Whenever I hide the carousel, wait a couple of seconds and show it, the left and right arrows no longer work and the carousel doesn't auto cycle.

For some reason I can't save a plunker but here's the html:

<!doctype html>
<html ng-app="plunker">

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.js"></script>
  <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.9.0.js"></script>
  <script src="example.js"></script>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

  <div ng-controller="CarouselDemoCtrl">
    <input type="checkbox" ng-model="hide">Click to hide
    <div ng-hide="hide">
      <carousel interval="2000">
        <slide ng-repeat="slide in slides" active="slide.active">
          <img ng-src="{{slide.url}}" style="margin:auto;">
          <div class="carousel-caption">
            <p>{{slide.description}}</p>
          </div>
        </slide>
      </carousel>
    </div>
  </div>
</body>

</html>

And js:

angular.module('plunker', ['ui.bootstrap']);
function CarouselDemoCtrl($scope) {
  $scope.slides = [{
      url: 'http://i.imgur.com/xKE07.jpg',
      description: 'bla'
    }, {
      url: 'http://wpmedia.blogs.windsorstar.com/2013/01/cat_shot_by_arrow-1.jpg',
      description: 'bli'
    }];
}
@chrisirhc
Copy link
Contributor

Attempted to reproduce this but it seems to work fine here
This Plunker demonstrates this issue: http://plnkr.co/edit/d9IK5UXcsqeAFmJgTFr5?p=preview

This is due to the transition waiting for a transitionend event which never fires because the element is hidden. The next never fires the CarouselController's select method because there's always a currentTransition that never ends (see these lines).
The transitionend event needs a fallback timer so that it always completes. However, the $transition service will possibly be refactored when we use ngAnimate.

@joshkurz
Copy link
Contributor

joshkurz commented Jan 3, 2014

I think your right @chrisirhc. ngAnimate is probably the best way to fix this issue.

For now the best way to conditionally show and hide the carousel is to use ngIf or a switch.

although as @caitp pointed out here angular/angular.js#5620 removing these carousels with ng-if and switch can mess up desired caching.

@aqzhyi
Copy link

aqzhyi commented Feb 6, 2014

+1

http://jsbin.com/ketam/2/edit

@chrisirhc chrisirhc mentioned this issue Mar 3, 2014
Closed
@pkozlowski-opensource pkozlowski-opensource removed this from the 0.10.0 (AngularJS 1.2) milestone May 7, 2014
@chrisirhc chrisirhc mentioned this issue Sep 15, 2014
Closed
4 tasks
chrisirhc added a commit to chrisirhc/angular-ui-bootstrap that referenced this issue Sep 15, 2014
@chrisirhc
refactor(carousel): use ngAnimate for animation
3985500 
Fixes angular-ui#1350
Fixes angular-ui#1513
Fixes angular-ui#1185
Fixes angular-ui#2062
Fixes angular-ui#2235
chrisirhc added a commit to chrisirhc/angular-ui-bootstrap that referenced this issue Sep 15, 2014
@chrisirhc
refactor(carousel): use ngAnimate for animation
edcb62a 
Fixes angular-ui#1350
Fixes angular-ui#1513
Fixes angular-ui#1185
Fixes angular-ui#2062
Fixes angular-ui#2235
Closes angular-ui#2067
chrisirhc added a commit to chrisirhc/angular-ui-bootstrap that referenced this issue Sep 15, 2014
@chrisirhc
refactor(carousel): use ngAnimate for animation
1843e4b 
Fixes angular-ui#1350
Fixes angular-ui#1513
Fixes angular-ui#1185
Fixes angular-ui#2062
Fixes angular-ui#2235
Closes angular-ui#2067
@JobaDiniz
Copy link

This was reported Jan... I didn't see this issue and created another one: #2752 with plunker.

It would be great to create at least a patch for this.

  1. Is this already fixed?
  2. Is there a workaround?

@JobaDiniz JobaDiniz mentioned this issue Nov 26, 2014
Closed
@JobaDiniz
Copy link

The only way I managed to make this work was simulating a click on carousel-indicators:

$timeout(function () {
                    $('.carousel-indicators li:not(.active):first').click();
                }, 500);

chrisirhc added a commit to chrisirhc/angular-ui-bootstrap that referenced this issue Mar 16, 2015
@chrisirhc
refactor(carousel): use ngAnimate for animation
044719b 
Fixes angular-ui#1350
Fixes angular-ui#1513
Fixes angular-ui#1185
Fixes angular-ui#2062
Fixes angular-ui#2235
Closes angular-ui#2067
chrisirhc added a commit to chrisirhc/angular-ui-bootstrap that referenced this issue Mar 17, 2015
@chrisirhc
refactor(carousel): use ngAnimate for animation
5af6224 
Fixes angular-ui#1350
Fixes angular-ui#1513
Fixes angular-ui#1185
Fixes angular-ui#2062
Fixes angular-ui#2235
Closes angular-ui#2067
@karianna karianna added this to the 0.13.0 milestone Mar 19, 2015
This was referenced Feb 8, 2016
Closed
Merged
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
component: carousel type: bug
Projects
None yet
Milestone
0.13.0 (AngularJS 1.3)
Development

Successfully merging a pull request may close this issue.

refactor(carousel): use ngAnimate chrisirhc/angular-ui-bootstrap
7 participants
@chrisirhc @JobaDiniz @karianna @pkozlowski-opensource @aqzhyi @joshkurz @uriva