- 首页
- 其他开发
- UI-Bootstrap 0.6.0 Carousel 在动态更改幻灯片图像时不起作用
UI-Bootstrap 0.6.0 Carousel 在动态更改幻灯片图像时不起作用
[英] UI-Bootstrap 0.6.0 Carousel not working when the slide images are changed dynamically
本文介绍了UI-Bootstrap 0.6.0 Carousel 在动态更改幻灯片图像时不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我不完全确定这是轮播中的错误，但看起来确实如此.
我正在使用轮播展示船图片.当我单击按钮时，将执行按船 ID 获取图片列表的功能，并从数据库中检索图片列表.第一次，一切正常.我可以看到显示图片的旋转木马.但是，如果我第二次单击此按钮，该功能将再次运行，并且幻灯片图像会动态更改.这一次，轮播消失了.只是为了检查该功能是否有效以及图片是否存在，我使用 Chrome 工具来检查代码.我可以确认带有图片的幻灯片在那里.但是，两种生成的代码之间存在一些差异.请找到附加的轮播代码两次.第一个是核心工作时.第二个是代码不起作用时(当我单击按钮并第二次运行该函数时).
这是轮播源代码:
<轮播间隔=30000"><slide ng-repeat="boatPhoto inboatPhotos"><img src="//{{S3_BUCKET}}.{{PHOTO_SERVER_URL}}/img/boats/{{boatSelected.id}}/{{boatPhoto.id}}.{{boatPhoto.mime}}" style=保证金:自动；"></幻灯片></轮播>
我已经比较了两个代码，乍一看，我可以看到它在工作时第一张图片中有一个活动类，而第二个代码中没有.
代码工作(第一次运行):
<div class="carousel" interval="30000"><ol class="carousel-indicators" ng-show="slides().length > 1"><a href=""><!-- ngRepeat: 幻灯片中的幻灯片() --><li ng-repeat="幻灯片中的幻灯片()" 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:boatPhotos 中的boatPhoto --><div ng-class="{'主动':离开 ||(活动 && ！进入)，'prev': (next || active) &&方向=='上一个'，'next': (next || active) &&方向=='下一个'，'右':方向=='上一个'，'左':方向=='下一个'}" class="item ng-scope active" ng-transclude="" ng-repeat="boatPhoto inboatPhotos"><img src="//yanpy.dev.s3.amazonaws.com/img/boats/1/1.jpg" style="margin:auto;"class="ng-scope"></div><div ng-class="{'主动':离开 ||(活动 && ！进入)，'prev': (next || active) &&方向=='上一个'，'next': (next || active) &&方向=='下一个'，'右':方向=='上一个'，'左':方向=='下一个'}" class="item ng-scope" ng-transclude="" ng-repeat="boatPhoto inboatPhotos"><img src="//yanpy.dev.s3.amazonaws.com/img/boats/1/2.jpg" style="margin:auto;"class="ng-scope"></div><div ng-class="{'主动':离开 ||(活动 && ！进入)，'prev': (next || active) &&方向=='上一个'，'next': (next || active) &&方向=='下一个'，'右':方向=='上一个'，'左':方向=='下一个'}" class="item ng-scope" ng-transclude="" ng-repeat="boatPhoto inboatPhotos"><img src="//yanpy.dev.s3.amazonaws.com/img/boats/1/3.jpg" style="margin:auto;"class="ng-scope"></div><div ng-class="{'主动':离开 ||(活动 && ！进入)，'prev': (next || active) &&方向=='上一个'，'next': (next || active) &&方向=='下一个'，'右':方向=='上一个'，'左':方向=='下一个'}" class="item ng-scope" ng-transclude="" ng-repeat="boatPhoto inboatPhotos"><img src="//yanpy.dev.s3.amazonaws.com/img/boats/1/4.jpg" style="margin:auto;"class="ng-scope"></div><div ng-class="{'主动':离开 ||(活动 && ！进入)，'prev': (next || active) &&方向=='上一个'，'next': (next || active) &&方向=='下一个'，'右':方向=='上一个'，'左':方向=='下一个'}" class="item ng-scope" ng-transclude="" ng-repeat="boatPhoto inboatPhotos"><img src="//yanpy.dev.s3.amazonaws.com/img/boats/1/5.jpg" style="margin:auto;"class="ng-scope"></div><div ng-class="{'主动':离开 ||(活动 && ！进入)，'prev': (next || active) &&方向=='上一个'，'next': (next || active) &&方向=='下一个'，'右':方向=='上一个'，'左':方向=='下一个'}" class="item ng-scope" ng-transclude="" ng-repeat="boatPhoto inboatPhotos"><img src="//yanpy.dev.s3.amazonaws.com/img/boats/1/6.jpg" style="margin:auto;"class="ng-scope">
<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 class="carousel" interval="30000"><ol class="carousel-indicators" ng-show="slides().length > 1"><a href=""><!-- ngRepeat: 幻灯片中的幻灯片() --><li ng-repeat="幻灯片中的幻灯片()" 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:boatPhotos 中的boatPhoto --><div ng-class="{'主动':离开 ||(活动 && ！进入)，'prev': (next || active) &&方向=='上一个'，'next': (next || active) &&方向=='下一个'，'右':方向=='上一个'，'左':方向=='下一个'}" class="item ng-scope" ng-transclude="" ng-repeat="boatPhoto inboatPhotos"><img src="//yanpy.dev.s3.amazonaws.com/img/boats/1/1.jpg" style="margin:auto;"class="ng-scope"></div><div ng-class="{'主动':离开 ||(活动 && ！进入)，'prev': (next || active) &&方向=='上一个'，'next': (next || active) &&方向=='下一个'，'右':方向=='上一个'，'左':方向=='下一个'}" class="item ng-scope" ng-transclude="" ng-repeat="boatPhoto inboatPhotos"><img src="//yanpy.dev.s3.amazonaws.com/img/boats/1/2.jpg" style="margin:auto;"class="ng-scope"></div><div ng-class="{'主动':离开 ||(活动 && ！进入)，'prev': (next || active) &&方向=='上一个'，'next': (next || active) &&方向=='下一个'，'右':方向=='上一个'，'左':方向=='下一个'}" class="item ng-scope" ng-transclude="" ng-repeat="boatPhoto inboatPhotos"><img src="//yanpy.dev.s3.amazonaws.com/img/boats/1/3.jpg" style="margin:auto;"class="ng-scope"></div><div ng-class="{'主动':离开 ||(活动 && ！进入)，'prev': (next || active) &&方向=='上一个'，'next': (next || active) &&方向=='下一个'，'右':方向=='上一个'，'左':方向=='下一个'}" class="item ng-scope" ng-transclude="" ng-repeat="boatPhoto inboatPhotos"><img src="//yanpy.dev.s3.amazonaws.com/img/boats/1/4.jpg" style="margin:auto;"class="ng-scope"></div><div ng-class="{'主动':离开 ||(活动 && ！进入)，'prev': (next || active) &&方向=='上一个'，'next': (next || active) &&方向=='下一个'，'右':方向=='上一个'，'左':方向=='下一个'}" class="item ng-scope" ng-transclude="" ng-repeat="boatPhoto inboatPhotos"><img src="//yanpy.dev.s3.amazonaws.com/img/boats/1/5.jpg" style="margin:auto;"class="ng-scope"></div><div ng-class="{'主动':离开 ||(活动 && ！进入)，'prev': (next || active) &&方向=='上一个'，'next': (next || active) &&方向=='下一个'，'右':方向=='上一个'，'左':方向=='下一个'}" class="item ng-scope" ng-transclude="" ng-repeat="boatPhoto inboatPhotos"><img src="//yanpy.dev.s3.amazonaws.com/img/boats/1/6.jpg" style="margin:auto;"class="ng-scope">
<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>
是我遗漏了什么还是 UI-Bootstrap 错误?
我还创建了一个 plunked 尝试重现该问题，但我无法重现.无论如何，检查代码会很有帮助.http://plnkr.co/edit/OzZmlCNT7M5MeT5EANy5?p=preview
更新
我刚刚注意到这篇文章 AngularUI Boostrap Carousel 在制作新幻灯片后设置活动幻灯片.我认为我的问题与此有关或相同.这篇文章中的 plunker 与我的应用程序中的行为相同，但在我的应用程序中，当我单击下一个或上一个箭头时，图片不会显示.
解决方案
此问题已在更高版本的 UI-bootstrap 中修复.唯一的解决办法是升级.
https://github.com/angular-ui/bootstrap/issues/2235
I'm not completely sure this is a bug in carousel, but it really looks like it.
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).
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>
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 WORKING (First run):
<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 NOT WORKING (SECOND RUN):
<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?
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
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.
解决方案
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-Bootstrap 0.6.0 Carousel 在动态更改幻灯片图像时不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
