Question

我正在尝试使用angular-ui bootstrap轮播（参考http://angular-ui.github.io/bootstrap/）。我的问题是过渡不起作用，图像只是出现/消失而不是作为演示从右向左移动。

我使用的是Chrome版本43.0

HTML：

<ComboBox x:Name="comboBox" SelectionChanged="comboBox_SelectionChanged"  DataContext="{StaticResource myTableViewSource}" Text="{Binding myField}" shell:WindowChrome.IsHitTestVisibleInChrome="True" Canvas.Left="58" Canvas.Top="192" Width="120"/>

example.js：

<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.1.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
Testing
<div ng-controller="CarouselDemoCtrl">
  <div style="height: 305px">
    <carousel interval="myInterval" no-wrap="noWrapSlides">
      <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 class="row">
    <div class="col-md-6">
      <button type="button" class="btn btn-info" ng-click="addSlide()">Add Slide</button>
      <div class="checkbox">
        <label>
          <input type="checkbox" ng-model="noWrapSlides">
          Disable Slide Looping
        </label>
      </div>
    </div>
    <div class="col-md-6">
      Interval, in milliseconds: <input type="number" class="form-control" ng-model="myInterval">
      <br />Enter a negative number or 0 to stop the interval.
    </div>
  </div>
</div>
  </body>
</html>

非常感谢

Answer 1

解决方案是添加ng-animate作为依赖项。像这样：

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

当然，您也需要链接到脚本。

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

Here is a Plunker它在哪里工作（虽然不是来自我）。

但是，将ngAnimate添加为依赖项也可能会破坏您的滑块/轮播 - Catch 22！

如果发生这种情况，read this thread并尝试使用其他Angular版本。

编辑：使用Angular和ng-Animate版本1.3.13对我来说 - 只是在项目中尝试过 - 而使用版本不匹配不起作用。

轮播图像转换不起作用（ui.bootstrap.carousel）

1 个答案: