Bootstrap ui空转盘

时间:2015-04-30 13:05:53

标签: angular-ui-bootstrap

我有一些奇怪的问题。我在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;
    }



});

0 个答案:

没有答案