angular-animate.js v1.4.3 not working with Bootstrap-UI carousel widget

[OpenSiteMobile]

While testing angular-animate v1.4.3-build.4093+sha.9ea52d8 with AngularJS v1.4.2 and BootstrapUI Version: 0.13.0 - 2015-05-02, it appears that the carousel widget is not working. I tested using the "index.html" page from https://angular-ui.github.io/bootstrap/. I do however use jQuery 2.1.4 instead of just jqLite.

A simple Plunker example with just the carousel widget seems to work just fine, but the angular-animate.js script seems to have a problem with the timing of loading the very large index.html page used by Bootstrap-UI and the images used by the carousel.

Sorry I can't be more specific, since it doesn't error out or otherwise affect the rest of the page load.

[OpenSiteMobile]

To add to the above, there also seems to be a problem with the modal widget too. It works the first time you click open a modal window, but then hangs on the "background" screen. Same configuration as above (angular-animate.js v1.4.3, AngularJS v1.4.2 and Bootstrap-UI v0.13.0 using the BS index.html page).

[OpenSiteMobile]

A side note: the mergeClasses function in angular-animate is different from the one used in AngularJS. I believe the one in AngularJS was just revised one or two dot levels back.

[lgalfaso]

@OpenSiteMobile It would be important to have:

• A plunker with a reproducible scenario
• Understanding the reasons why you think this is an issue with Angular and not with Angular-ui

Thanks

[OpenSiteMobile]

Sorry, but I thought this Issue Tracker was for the Angular-UI too. Yeah, it is an issue only for the BootStrap-UI (angular-animate.js) as far as I know. Plus, as I mentioned, I did do a quick Plunker with just the carousel, and it worked fine (I loaded the angular-animate.js as a "new file" in Pluncker. It was just a heads-up that this was happening. And while nobody will ever read this anyway, I might as well tell you that the datepicker widget example on the Bootstrap-UI website doesn't work for the date input (with little calendar graphic) in Chrome Version 43.0.2357.81 Ubuntu 14.10 at least. It won't allow selecting a date from the calendar, but does for the current date button. Yeah, I'm real impressed with how stable Angular w/ Angular-UI is working out.

[matsko]

Let's have a look at this in depth once #12248 is in.

[sreeramu]

@OpenSiteMobile @matsko For carousel widget issue UI Bootstrap still uses $animate:close which is not supported in 1.4.x, so that only the carousel widget is not working with 1.4.x angular animate.

code from UI Bootstrap:

self.select = $scope.select = function(nextSlide, direction) {
    var nextIndex = self.indexOfSlide(nextSlide);
    //Decide direction if it's not given
    if (direction === undefined) {
      direction = nextIndex > self.getCurrentIndex() ? 'next' : 'prev';
    }
    //Prevent this user-triggered transition from occurring if there is already one in progress
    if (nextSlide && nextSlide !== self.currentSlide && !$scope.$currentTransition) {
      goNext(nextSlide, nextIndex, direction);
    }
  };

  function goNext(slide, index, direction) {
    // Scope has been destroyed, stop here.
    if (destroyed) { return; }

    angular.extend(slide, {direction: direction, active: true});
    angular.extend(self.currentSlide || {}, {direction: direction, active: false});
    if ($animate.enabled() && !$scope.noTransition && !$scope.$currentTransition &&
      slide.$element) {
      slide.$element.data(SLIDE_DIRECTION, slide.direction);
      $scope.$currentTransition = true;
      slide.$element.one('$animate:close', function closeFn() {
        $scope.$currentTransition = null;
      });
    }

    self.currentSlide = slide;
    currentIndex = index;

    //every time you change slides, reset the timer
    restartTimer();
  }

In above code there is a check for transisition complition , if the transisition is completed then only the next slide is shifted.

if (nextSlide && nextSlide !== self.currentSlide && !$scope.$currentTransition) {
      goNext(nextSlide, nextIndex, direction);
    }

and this will not work with Angular Animate 1.4.x

slide.$element.one('$animate:close', function closeFn() {
        $scope.$currentTransition = null;
      });

[wesleycho]

This is not an angular issue - I am working on a fix for UI Bootstrap here: angular-ui/bootstrap#4041

I recommend this issue be closed.

[pkozlowski-opensource]

Thnx @wesleycho !