Angular Bootstrap Carousel 幻灯片转换无法正常工作答案

【问题标题】：Angular Bootstrap Carousel Slide Transition not working correctlyAngular Bootstrap Carousel 幻灯片转换无法正常工作
【发布时间】：2015-07-13 07:18:56
【问题描述】：

我希望在我正在构建的应用程序中使用Angular Bootstrap Carousel Directive。

我能够很好地实现它，但转换并没有像文档中显示的那样工作。应该发生的是旧图像向左滑出，新图像从右侧滑入。

我还注意到，如果您点击“编辑 Plunkr”来查看他们使用的代码，那么奇怪的是，我在本地实现中看到了同样的事情。

直接代码取自他们的以下文档：

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('CarouselDemoCtrl', function($scope) {
  $scope.myInterval = 5000;
  var slides = $scope.slides = [];
  $scope.addSlide = function() {
    var newWidth = 600 + slides.length + 1;
    slides.push({
      image: 'http://placekitten.com/' + newWidth + '/300',
      text: ['More', 'Extra', 'Lots of', 'Surplus'][slides.length % 4] + ' ' + ['Cats', 'Kittys', 'Felines', 'Cutes'][slides.length % 4]
    });
  };
  for (var i = 0; i < 4; i++) {
    $scope.addSlide();
  }
});

<!doctype html>
<html ng-app="ui.bootstrap.demo">

<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script>
  <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script>
  <script src="example.js"></script>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

  <div ng-controller="CarouselDemoCtrl">
    <div style="height: 305px">
      <carousel interval="myInterval">
        <slide ng-repeat="slide in slides" active="slide.active">
          <img ng-src="{{slide.image}}" style="margin:auto;">
          <div class="carousel-caption">
            <h4>Slide {{$index}}</h4>
            <p>{{slide.text}}</p>
          </div>
        </slide>
      </carousel>
    </div>
  </div>
</body>

</html>

我看到的是它只是切换到新图像，没有幻灯片，什么都没有。

这里缺少什么？是bug还是别的什么？

【问题讨论】：

标签： angularjs angular-bootstrap

【解决方案1】：

您缺少角度动画模块。您需要将其添加到您的脚本列表中：

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular-animate.min.js"></script>

然后像这样进入你的模块：

angular.module('ui.bootstrap.demo', ['ui.bootstrap', 'ngAnimate']);

这是 plunker 的一个分支，其中添加了 nganimate：http://plnkr.co/edit/E7j7KiZmCzIg629vWTnt?p=preview

【讨论】：

啊哈！谢谢，这解决了它。看来他们在文档的 plunker 链接中忽略了这一点。