0
我不完全确定这是一个旋转木马中的错误，但看起来确实如此。UI-Bootstrap 0.6.0 Carousel在幻灯片图像动态更改时无法工作
我使用旋转木马来显示船只图片。当我点击一个按钮时，会执行一个函数来获取船名图片列表，并从数据库中检索图片列表。第一次，一切都很完美。我可以看到显示图片的旋转木马。但是，如果再次单击此按钮，该功能将再次运行，并且幻灯片图像会动态更改。这一次，旋转木马消失了。只是为了检查功能是否正常工作，图片是否存在，我使用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>
我比较两个代码，并一见钟情，我可以当它在那里工作的第一张图片，这是在第二缺少主动类看码。
代码工作方式（第一次运行）：
<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>
CODE不工作（第二轮）：
<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>
我缺少的东西，或者是一个用户界面，引导错误？
我也创建了一个试图重现该问题，但我无法。无论如何，检查代码会很有帮助。 http://plnkr.co/edit/OzZmlCNT7M5MeT5EANy5?p=preview
UPDATE
我刚才注意到这个帖子Angular UI Boostrap Carousel setting active slide after making new slides。我认为我的问题与此相关或相同。这篇文章中的插页行为与我的应用程序相同，但在我的应用程序中，当点击下一个或上一个箭头时，图片不会显示。