我有一些奇怪的问题。我在bootstrap的模态框中使用bootstrap ui的旋转木马。一开始是为旋转木马初始化图像。然后我点击一个按钮来显示模态框。这次他们出现正确。但后来我重新启动carouseldata(切换到其他数据)并再次打开旋转木马然后他是空的。有可能解决这个问题吗?
您可以在此举例说明:http://plnkr.co/edit/YASfl9nF0cxqlytFjjI0?p=preview
首先点击我,然后你会看到模态框。关闭模态框并从数据切换并再次打开。
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myTalkModalLabel">Title</h4>
</div>
<div class="modal-body">
<carousel interval="myInterval">
<slide ng-repeat="slide in getImages()">
<img ng-src="slide.image" />
</slide>
</carousel>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
var app = angular.module('plunker',['ui.bootstrap']);
app.controller('MainCtrl', function($scope) {
$scope.myInterval = 2000;
$scope.images = ["http://nautisme.nc/photos.nautisme.nc/201410/o_193fo6a4ckel17ml1bvif3lo9ki.jpg","http://nautisme.nc/photos.nautisme.nc/201410/o_193fo6a4c1t8t79i15qo99l1jqlj.jpg","http://nautisme.nc/photos.nautisme.nc/201410/o_193fo6a4davv1tplqkf24f1h4vk.jpg"];
var images2 = ["http://nautisme.nc/photos.nautisme.nc/201410/o_193fo6a4dg9gqgvt6o60l8dl.jpg","http://nautisme.nc/photos.nautisme.nc/201410/o_193fo6a4d59tal51dkp1ask69nm.jpg","http://nautisme.nc/photos.nautisme.nc/201410/o_193fo6a4e6st4vcoqii8r1vpgn.jpg","http://nautisme.nc/photos.nautisme.nc/201410/o_193fo6a4e184m10d46264i4buto.jpg"];
$scope.getImages = function(){
return $scope.images;
}
$scope.showModal = function(){
$("#modal").modal("show");
}
$scope.showModal = function(){
$('#modal').modal('show');
}
$scope.switchImages = function(){
var temp = $scope.images;
$scope.images = images2;
images2 = temp;
}
});