UI的引导时，幻灯片图像的动态变化0.6.0旋转木马不工作 [英] UI-Bootstrap 0.6.0 Carousel not working when the slide images are changed dynamically
问题描述
我不能完全肯定这是旋转木马的一个bug，但它确实看起来像它。
I'm not completely sure this is a bug in carousel, but it really looks like it.
我使用了一个转盘显示船的照片。当我点击一个按钮，通过执行船ID和图像的列表被从数据库中检索到的函数来获取的照片的列表。第一次，一切都完美。我可以看到转盘显示图片。但是，如果我在此按钮上点击第二次时，功能被再次运行，并且滑动图像动态地改变。这一次，旋转木马消失。只是为了检查工作的功能和图片在那里，我使用Chrome的工具来检查code。我可以证实，用图片的幻灯片在那里。但是，也有两个产生codeS之间的一些差异。请附上两次传送带code。当核心工作，第一个是。第二个是当code不工作（当我点击按钮，并运行第二次功能）。
I'm using a carousel to display boat pictures. When I click on a button, a function to get a list of pictures by boat ID is executed and the list of pictures is retrieved from the database. First time, everything works perfectly. I can see the carousel displaying the pictures. However, if I click on this button for a second time, the function is run again, and the slide images are changed dynamically. This time, the carousel disappears. Just to check if the function worked and the pictures are there, I use Chrome tools to check the code. I can confirm that the slides with the pictures are there. However, there are some differences between both generated codes. Please, find the carousel code attached twice. The first one is when the core is working. The second one is when the code is not working (when I click the button and run the function for second time).
下面是旋转木马源$ C $ C：
Here is the carousel source code:
<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>
我比较两者codeS和一见钟情，我当它的工作没有在第一张图片，这是在第二code缺少一个活跃的类可以看到。
I have compared both codes and at first sight, I can see when it's working there is an active class in the first picture, which is missing in the second code.
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 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>
我缺少的东西，或者是一个用户界面，引导错误？
Am I missing something or it is a UI-Bootstrap bug?
我也创建了一个毫不犹豫地掏出试图重现该问题，但我不能。无论如何，这将有助于检查出code。 http://plnkr.co/edit/OzZmlCNT7M5MeT5EANy5?p=$p$pview
I have also created a plunked trying to reproduce the issue, but I wasn't able to. Anyway, it would be helpful to check out the code. http://plnkr.co/edit/OzZmlCNT7M5MeT5EANy5?p=preview
UPDATE
我刚注意到这个帖子<一个href=\"http://stackoverflow.com/questions/23786985/angular-ui-boostrap-carousel-setting-active-slide-after-making-new-slides\">Angular UI自举转盘设置作出新的幻灯片后活动幻灯片中。我想，不知我的问题是相关或相同这一点。这则讯息的plunker行为一样在我的应用程序，但在我的应用程序，当我点击下一个或previous箭头图片不显示。
I have just noticed this post Angular UI Boostrap Carousel setting active slide after making new slides. I think somehow my issue is related or same to this. The plunker in this post behaves the same as in my application, but in my application the pictures are not shown when I click on the next or previous arrows.
推荐答案
此问题已在UI自举的更高版本。唯一的解决方法就是升级。
This issue is fixed in later versions of UI-bootstrap. The only fix is to upgrade.
https://github.com/angular-ui/bootstrap/issues/2235
这篇关于UI的引导时，幻灯片图像的动态变化0.6.0旋转木马不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
