使用 bootstrap 和 angularUi 在模态窗口中旋转木马

Question

我正在尝试使用 angular ui 和 bootstrap 创建一个图片库。图片库有 4x4 行照片，我希望用户在单击照片时能够在模式窗口中打开照片。模态窗口应该以轮播的形式显示照片，这样他就可以通过“下一个”和“上一个”看到整个图片库

下面是我的代码。模态窗口打开但不包含轮播。

HTML 代码

    <div id="listing-detail-gallery" class="container">
      <ul class="row">
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4" ng-repeat="image in         selectedListing.images">
          <img class="img-responsive" ng-click="openModal()"       src="assets/images/{{image}}"/>
        </li>
      </ul>
    </div>

控制器

    controller( 'ListingDetailsCtrl', function ListingDetailsCtrl($scope ,$modal, $stateParams,ListingService,CategoryService) {
       $scope.id= $stateParams.id;
        $scope.selectedListing = ListingService.find($scope.id);
        $scope.category= CategoryService.findByCode($scope.selectedListing.category);


        //Open Modal Window for image
        $scope.openModal = function () {
        var modalInstance = $modal.open({
          animation: true,
          size:"lg",
          template: '<div class="modal-body"><carousel><slide ng-repeat="image in items">{{image}}        <img style="margin:auto;" ng-src="assets/images/{{image}}"></slide></carousel></div>',
          resolve: {
            items: function () {
              return $scope.selectedListing.images;
            }
          }
        });

      };

如果您能找出问题所在，请帮助我。

Answer 1

这是一个演示（它基于我的一个较旧的演示，因此它的模板略有不同，并添加了一些 CSS 以使其更漂亮，但它与下面描述的代码相同）：

Plunker

我会重构您的控制器，这样您就不必为您的 modalInstance 使用单独的控制器。这样会更容易：

controller( 'ListingDetailsCtrl', function ListingDetailsCtrl($scope, $modal, $stateParams,ListingService,CategoryService) {
  $scope.id= $stateParams.id;
  $scope.selectedListing = ListingService.find($scope.id);
  $scope.category= CategoryService.findByCode($scope.selectedListing.category);
  $scope.openModal = function(indx) {
    //This will let you open the carousel to the image that was clicked
    $scope.selectedListing.images[indx].active=true;

    $scope.modalInstance= $modal.open({
      animation: true,
      size:"lg",
      //To set the active slide when loading the carousel, just add
      //active = "image.active" to the slide element. Also, we're using 
      //the current scope, so change your slide repeat to "image in
      //selectedListing.images" 
      template: '<div class="modal-body"><carousel><slide ng-repeat="image in selectedListing.images" active="image.active">{{image}}<img style="margin:auto;" ng-src="assets/images/{{image}}"></slide></carousel></div>',
    });
  };
  $scope.ok = function () {
    $scope.modalInstance.close();
  };
});

然后您只需对 HTML 视图进行一项更改，以便将图像的索引传递给 openModal fn：

<div id="listing-detail-gallery" class="container">
  <ul class="row">
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4" ng-repeat="image in selectedListing.images">
      <img class="img-responsive" ng-click="openModal($index)" src="assets/images/{{image}}"/>
    </li>
  </ul>
</div>

附：您会注意到我将轮播指示器隐藏在轮播中。在 ui-bootstrap 0.13.0 中有一个非常丑陋的未解决的bug，如果您有很多幻灯片，这会导致指标的排序不正确。如果您想使用指标，有两个简单的选项可以解决此问题。一种是修改 carousel.html 模板并从指标中删除 orderBy:'index'。或者，两个使用 0.12.x 版本直到修复。 （我会选择前者）。

Answer 2

我建议您使用现有的角度模块，而不是重新发明轮子（尽管有时这可能是一种很好的学习体验）。我最近在一个项目中使用了这个，它包含您正在寻找的所有功能：angular bootstrap lightbox。基本示例将使您启动并运行您所追求的功能。

<ul ng-controller="GalleryCtrl">
    <li ng-repeat="image in images">
        <a ng-click="openLightboxModal($index)">
           <img ng-src="{{image.thumbUrl}}" class="img-thumbnail">
        </a>
    </li>
</ul>

angular.module('app').controller('GalleryCtrl', function ($scope, Lightbox) {
  $scope.images = [
    {
      'url': '1.jpg',
      'caption': 'Optional caption',
      'thumbUrl': 'thumb1.jpg' // used only for this example
    },
    {
      'url': '2.gif',
      'thumbUrl': 'thumb2.jpg'
    },
    {
      'url': '3.png',
      'thumbUrl': 'thumb3.png'
    }
  ];

  $scope.openLightboxModal = function (index) {
    Lightbox.openModal($scope.images, index);
  };
});