Angular-ui-Bootstrap轮播不运行无限

Question

我正在使用 bootstrap 旋转木马和 angular 并且由于某些原因幻灯片不是运行无限，我认为这应该是它被编程为从阅读中工作的方式我执行的其他 SO 答案以及 bootstrap 文档中的答案。我有 3 张图片设置为幻灯片，但它只更改一次然后停止（即从 image1 更改为 image2）。

我的 angular 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 制作 uild 一个好的轮播时遇到了问题。好难过...

-- 可能的解决方案 --

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

Angular-ui-Bootstrap轮播不运行无限

Angular-ui-Bootstrap carousel not running infinitely

angularjs

angular-ui-bootstrap