Bootstrap ui 空轮播

Question

我有一些奇怪的问题。我在 bootstrap 的模式框中使用 bootstrap ui 的轮播。一开始是初始化旋转木马的图像。然后我点击一个按钮来显示模态框。这次它们正确显示了。但后来我重新初始化轮播数据（切换到其他数据）并再次打开轮播，然后他是空的。有没有可能的解决方案？

这里有一个例子：http://plnkr.co/edit/YASfl9nF0cxqlytFjjI0?p=preview

先点击click me然后你会看到模态框。关闭模态框从数据切换再打开

<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;
    }



});

Answer 1

Updated Plunker

主要问题是您试图在 AngularJS 应用中使用 Bootstrap 基于 jQuery 的插件 (bootstrap.js) 以及 UI-Bootstrap。我将您的模式换成了 UI-Bootstrap modal 实现。 UI Bootstrap 与 bootstrap.js 或 jQuery 无关，因此我从页面 <head> 中删除了两者以避免冲突。

也许这只是 Plunker 中的错字，但我还需要修复轮播中的 ng-repeat。在你有 slide in getImages() 的地方，我删除了函数并用 image in images 引用了 $scope.images。此外，由于 $scope.images 是一个图像 url 数组，要访问它们，您只需使用表达式：{{image}}.

    <carousel interval="myInterval">
      <slide ng-repeat="image in images track by $index">
        <img ng-src="{{image}}" style="width: 100%;" />
      </slide>
    </carousel>

APP JS:

var app = angular.module('plunker',['ui.bootstrap']);

app.controller('MainCtrl', function($scope, $modal) {
  var images2 = ["http://placehold.it/500x300/009999/fff&text=Group%202:%20Image%201", "http://placehold.it/500x300/009999/fff&text=Group%202:%20Image%202", "http://placehold.it/500x300/009999/fff&text=Group%202:%20Image%203"];
  
  $scope.myInterval = 10000;
  $scope.images = ["http://placehold.it/500x300/e8117f/fff&text=Group%201:%20Image%201","http://placehold.it/500x300/e8117f/fff&text=Group%201:%20Image%202"];
  
  $scope.open = function (size) {
    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      size: size,
      resolve: {
        imgs: function () {
          return $scope.images;
        }
      }
    });
  };
  
  $scope.switchImages = function(){
    var temp = $scope.images;
    $scope.images = images2;
    images2 = temp;
  };
  
});

app.controller('ModalInstanceCtrl', function ($scope, $modalInstance, imgs) {
  $scope.images = imgs;
  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
});

标记：

<button class="btn btn-primary" ng-click="open()">Launch Modal</button>
<button class="btn btn-primary" ng-click="switchImages()">Switch Image Group</button>

<script type="text/ng-template" id="myModalContent.html">
  <div class="modal-header">
    <h3 class="modal-title">Title</h3>
  </div>
  <div class="modal-body">
    <carousel interval="myInterval">
      <slide ng-repeat="image in images track by $index">
        <img ng-src="{{image}}" style="width: 100%;" />
      </slide>
    </carousel>
  </div>
  <div class="modal-footer">
    <button class="btn btn-warning" ng-click="cancel()">Close</button>
  </div>
</script>

Bootstrap ui 空轮播

Bootstrap ui empty carousel

angular-ui-bootstrap

Updated Plunker