Question

我正在使用带角度的自举旋转木马，由于某种原因幻灯片没有无限运行，我认为它应该是通过阅读我已经执行的其他SO答案以及引导文档来编程工作的方式。我有3个图像设置为幻灯片，但它只更改一次然后停止（即从image1更改为image2）。

我的角度js看起来像这样：

this.Interval = 300;
this.slides = [
 {
  image: '/image1.jpg'
 }, 
 {
  image: '/image2.jpg'
 }, 
 {
  image: '/image3.jpg'
 }
 ];

我的HTML看起来像这样：

 <section id="test">
            <div class="container">
                <div class="col-md-2 hidden-sm"></div>
                <div class="col-md-12 col-sm-12">
                    <div class="row">
                        <carousel interval="Hello.Interval">
                            <slide ng-repeat="slide in Hello.slides" active="slide.active">
                            <div class="col-md-4 col-xs-3">
                                <img ng-src="{{slide.image}}">
                            </div>
                            <div class="col-md-8">
                                <p class="quote">
                                    <span translate="{{ 'quote[' + ($index + 1) + ']'}}"></span><br>
                                    <span class="quote-author" translate="{{ 'name[' + ($index + 1) + ']'}}"></span>
                                </p>
                            </div>
                            </slide>
                        </carousel>
                    </div>
                </div>
                <div class="col-md-2 hidden-sm"></div>
            </div>
        </section>

我添加了所有html，包括我认为无关的div，但也许这些div也有效果。虽然我确实尝试将其删除到裸骨，但它仍然无法正常工作。如果需要css，请告诉我。

Answer 1

我想出了答案。这是由于一个错误导致ng-animate无法使用ui.bootstrap。

以下指令解决了这个问题：

JS

app.directive('disableNgAnimate', ['$animate', function($animate) {
  return {
    restrict: 'A',
    link: function(scope, element) {
      $animate.enabled(false, element);
    }
  };
}]);

HTML

<carousel disable-ng-animate>
  ...
</carousel>

Answer 2

Paul的解决方案有效，但会破坏ngAnimate提供的动画。实际上我有问题用ui-bootstrap和ngAnimate构建一个好的旋转木马。太伤心了......

- 可能的解决方案 -

我在角度github问题中读到这是实际版本的问题，所以你必须使用ngAnimate和angular 1.3.13同时不解决这个问题。这解决了我的问题。

Angular-ui-Bootstrap旋转木马无法无限运行

2 个答案: