我不完全确定这是旋转木马中的错误，但它看起来确实如此。
我使用旋转木马来显示船只照片。当我点击按钮时，执行按船ID获取图片列表的功能，并从数据库中检索图片列表。第一次，一切都很完美。我可以看到显示图片的旋转木马。但是，如果我再次单击此按钮，则会再次运行该功能，并动态更改幻灯片图像。这一次，旋转木马消失了。只是为了检查功能是否有效以及图片是否存在，我使用Chrome工具检查代码。我可以确认带有图片的幻灯片在那里。但是，两个生成的代码之间存在一些差异。请找两次附加的旋转木马代码。第一个是核心工作时。第二个是代码不工作时（当我点击按钮并第二次运行该功能时）。
以下是轮播源代码：
<div id="boatCarousel" class="carousel slide" ng-show="boatSelected.mainPhoto">
<carousel interval="30000">
<slide ng-repeat="boatPhoto in boatPhotos">
<img src="//{{S3_BUCKET}}.{{PHOTO_SERVER_URL}}/img/boats/{{boatSelected.id}}/{{boatPhoto.id}}.{{boatPhoto.mime}}" style="margin:auto;">
</slide>
</carousel>
</div>
我比较了两个代码，乍一看，我可以看到它工作的时候第一张图片中有一个活动的类，第二个代码中缺少这个类。
CODE WORKING（首次运行）：
<div id="boatCarousel" class="carousel slide" ng-show="boatSelected.mainPhoto">
<div class="carousel" interval="30000">
<ol class="carousel-indicators" ng-show="slides().length > 1">
<a href=""><!-- ngRepeat: slide in slides() --><li ng-repeat="slide in slides()" ng-class="{active: isActive(slide)}" ng-click="select(slide)" class="ng-scope active"></li><li ng-repeat="slide in slides()" ng-class="{active: isActive(slide)}" ng-click="select(slide)" class="ng-scope"></li><li ng-repeat="slide in slides()" ng-class="{active: isActive(slide)}" ng-click="select(slide)" class="ng-scope"></li><li ng-repeat="slide in slides()" ng-class="{active: isActive(slide)}" ng-click="select(slide)" class="ng-scope"></li><li ng-repeat="slide in slides()" ng-class="{active: isActive(slide)}" ng-click="select(slide)" class="ng-scope"></li><li ng-repeat="slide in slides()" ng-class="{active: isActive(slide)}" ng-click="select(slide)" class="ng-scope"></li></a>
</ol>
<div class="carousel-inner" ng-transclude="">
<!-- ngRepeat: boatPhoto in boatPhotos --><div ng-class="{
'active': leaving || (active && !entering),
'prev': (next || active) && direction=='prev',
'next': (next || active) && direction=='next',
'right': direction=='prev',
'left': direction=='next'
}" class="item ng-scope active" ng-transclude="" ng-repeat="boatPhoto in boatPhotos">
<img src="//yanpy.dev.s3.amazonaws.com/img/boats/1/1.jpg" style="margin:auto;" class="ng-scope">
</div><div ng-class="{
'active': leaving || (active && !entering),
'prev': (next || active) && direction=='prev',
'next': (next || active) && direction=='next',
'right': direction=='prev',
'left': direction=='next'
}" class="item ng-scope" ng-transclude="" ng-repeat="boatPhoto in boatPhotos">
<img src="//yanpy.dev.s3.amazonaws.com/img/boats/1/2.jpg" style="margin:auto;" class="ng-scope">
</div><div ng-class="{
'active': leaving || (active && !entering),
'prev': (next || active) && direction=='prev',
'next': (next || active) && direction=='next',
'right': direction=='prev',
'left': direction=='next'
}" class="item ng-scope" ng-transclude="" ng-repeat="boatPhoto in boatPhotos">
<img src="//yanpy.dev.s3.amazonaws.com/img/boats/1/3.jpg" style="margin:auto;" class="ng-scope">
</div><div ng-class="{
'active': leaving || (active && !entering),
'prev': (next || active) && direction=='prev',
'next': (next || active) && direction=='next',
'right': direction=='prev',
'left': direction=='next'
}" class="item ng-scope" ng-transclude="" ng-repeat="boatPhoto in boatPhotos">
<img src="//yanpy.dev.s3.amazonaws.com/img/boats/1/4.jpg" style="margin:auto;" class="ng-scope">
</div><div ng-class="{
'active': leaving || (active && !entering),
'prev': (next || active) && direction=='prev',
'next': (next || active) && direction=='next',
'right': direction=='prev',
'left': direction=='next'
}" class="item ng-scope" ng-transclude="" ng-repeat="boatPhoto in boatPhotos">
<img src="//yanpy.dev.s3.amazonaws.com/img/boats/1/5.jpg" style="margin:auto;" class="ng-scope">
</div><div ng-class="{
'active': leaving || (active && !entering),
'prev': (next || active) && direction=='prev',
'next': (next || active) && direction=='next',
'right': direction=='prev',
'left': direction=='next'
}" class="item ng-scope" ng-transclude="" ng-repeat="boatPhoto in boatPhotos">
<img src="//yanpy.dev.s3.amazonaws.com/img/boats/1/6.jpg" style="margin:auto;" class="ng-scope">
</div>
</div>
<a ng-click="prev()" class="carousel-control left" ng-show="slides().length > 1" href="">‹</a>
<a ng-click="next()" class="carousel-control right" ng-show="slides().length > 1" href="">›</a>
</div>
</div>
代码无法工作（第二次运行）：
<div id="boatCarousel" class="carousel slide" ng-show="boatSelected.mainPhoto">
<div class="carousel" interval="30000">
<ol class="carousel-indicators" ng-show="slides().length > 1">
<a href=""><!-- ngRepeat: slide in slides() --><li ng-repeat="slide in slides()" ng-class="{active: isActive(slide)}" ng-click="select(slide)" class="ng-scope"></li><li ng-repeat="slide in slides()" ng-class="{active: isActive(slide)}" ng-click="select(slide)" class="ng-scope"></li><li ng-repeat="slide in slides()" ng-class="{active: isActive(slide)}" ng-click="select(slide)" class="ng-scope"></li><li ng-repeat="slide in slides()" ng-class="{active: isActive(slide)}" ng-click="select(slide)" class="ng-scope"></li><li ng-repeat="slide in slides()" ng-class="{active: isActive(slide)}" ng-click="select(slide)" class="ng-scope"></li><li ng-repeat="slide in slides()" ng-class="{active: isActive(slide)}" ng-click="select(slide)" class="ng-scope"></li></a>
</ol>
<div class="carousel-inner" ng-transclude="">
<!-- ngRepeat: boatPhoto in boatPhotos --><div ng-class="{
'active': leaving || (active && !entering),
'prev': (next || active) && direction=='prev',
'next': (next || active) && direction=='next',
'right': direction=='prev',
'left': direction=='next'
}" class="item ng-scope" ng-transclude="" ng-repeat="boatPhoto in boatPhotos">
<img src="//yanpy.dev.s3.amazonaws.com/img/boats/1/1.jpg" style="margin:auto;" class="ng-scope">
</div><div ng-class="{
'active': leaving || (active && !entering),
'prev': (next || active) && direction=='prev',
'next': (next || active) && direction=='next',
'right': direction=='prev',
'left': direction=='next'
}" class="item ng-scope" ng-transclude="" ng-repeat="boatPhoto in boatPhotos">
<img src="//yanpy.dev.s3.amazonaws.com/img/boats/1/2.jpg" style="margin:auto;" class="ng-scope">
</div><div ng-class="{
'active': leaving || (active && !entering),
'prev': (next || active) && direction=='prev',
'next': (next || active) && direction=='next',
'right': direction=='prev',
'left': direction=='next'
}" class="item ng-scope" ng-transclude="" ng-repeat="boatPhoto in boatPhotos">
<img src="//yanpy.dev.s3.amazonaws.com/img/boats/1/3.jpg" style="margin:auto;" class="ng-scope">
</div><div ng-class="{
'active': leaving || (active && !entering),
'prev': (next || active) && direction=='prev',
'next': (next || active) && direction=='next',
'right': direction=='prev',
'left': direction=='next'
}" class="item ng-scope" ng-transclude="" ng-repeat="boatPhoto in boatPhotos">
<img src="//yanpy.dev.s3.amazonaws.com/img/boats/1/4.jpg" style="margin:auto;" class="ng-scope">
</div><div ng-class="{
'active': leaving || (active && !entering),
'prev': (next || active) && direction=='prev',
'next': (next || active) && direction=='next',
'right': direction=='prev',
'left': direction=='next'
}" class="item ng-scope" ng-transclude="" ng-repeat="boatPhoto in boatPhotos">
<img src="//yanpy.dev.s3.amazonaws.com/img/boats/1/5.jpg" style="margin:auto;" class="ng-scope">
</div><div ng-class="{
'active': leaving || (active && !entering),
'prev': (next || active) && direction=='prev',
'next': (next || active) && direction=='next',
'right': direction=='prev',
'left': direction=='next'
}" class="item ng-scope" ng-transclude="" ng-repeat="boatPhoto in boatPhotos">
<img src="//yanpy.dev.s3.amazonaws.com/img/boats/1/6.jpg" style="margin:auto;" class="ng-scope">
</div>
</div>
<a ng-click="prev()" class="carousel-control left" ng-show="slides().length > 1" href="">‹</a>
<a ng-click="next()" class="carousel-control right" ng-show="slides().length > 1" href="">›</a>
</div>
</div>
我是否遗漏了某些内容，或者是UI-Bootstrap错误？
我还创造了一个试图重现这个问题，但我无法做到。无论如何，检查代码会很有帮助。 http://plnkr.co/edit/OzZmlCNT7M5MeT5EANy5?p=preview
UPDATE
我刚刚注意到这篇文章Angular UI Boostrap Carousel setting active slide after making new slides。我认为我的问题与此有关或相同。这篇文章中的plunker与我的应用程序中的相同，但在我的应用程序中，当我单击下一个或上一个箭头时，图片不会显示。
答案 0 :(得分：1)
此问题已在更高版本的UI-bootstrap中修复。唯一的解决方法是升级。