CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrapng-animate
Sheldan
Sheldan

Reputation: 73

ngAnimate breaks existing ui.bootstrap.carousel

I have this current app.js

angular.module('app', ['ngRoute', 'ngSanitize', 'ui.bootstrap','ui.router', 'com.2fdevs.videogular', 'com.2fdevs.videogular.plugins.controls', 'com.2fdevs.videogular.plugins.overlayplay',
'com.2fdevs.videogular.plugins.poster', 'com.2fdevs.videogular.plugins.buffering', 'ngDraggable','angular-loading-bar', 'chart.js', 'angularSpinner'])

and I include the needed javascript files in my index.html

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-sanitize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.1/ui-bootstrap-tpls.min.js"></script>

With this, the carousel is working at least, there is no transition animation, but if I click on the arrow it switches to the next one.

then I added the angular-animate to the index.html:

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-animate.js"></script>

and ngAnimate to the app.js as dependency.

But this break the carousel. With this, the carousel won't go forward on its own and a click on the arrow will do nothing. I do not see any errors in the console and not at all why this is not working. Am I missing some css stuff or what?

Upvotes: 0

Views: 677

Answers (1)

Joe.Flanigan
Joe.Flanigan

Reputation: 736

May be a little late here, but there is a solution to this. Make a directive which essentially disables ng-animate:

app.directive('disableAnimation', function ($animate) {
    return {
        restrict: 'A',
        link: function ($scope, $element, $attrs) {
            $attrs.$observe('disableAnimation', function (value) {
                $animate.enabled(!value, $element);
            });
        }
    }
});

Then add attribute "disable-animation='true'" to your carousel tag. This solution was suggested by another user on a different question. I'm trying desperately to find him and give him the credit he deserves, I'll make an edit if I locate it.

Upvotes: 1

Related Questions