ngAnimate打破现有ui.bootstrap.carousel [英] ngAnimate breaks existing ui.bootstrap.carousel

问题描述

我有这种电流app.js

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'])

和我包括我的index.html所需的JavaScript文件

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.

然后我加入了角到动画中的index.html：

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>

和ngAnimate到app.js的依赖关系。

and ngAnimate to the app.js as dependency.

但是，这打破了传送带。有了这个，旋转木马也不会往前走自身在箭头点击会做什么。我看不出在控制台中的任何错误，而不是在所有的为什么这是行不通的。我缺少一些CSS的东西还是什么？

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?

推荐答案

可能有点晚了这里，但有一个解决的办法。做一个指令，它实质上是禁用了NG-动画：

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.

这篇关于ngAnimate打破现有ui.bootstrap.carousel的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！