Plunker

Question

我正在尝试使用angular ui和bootstrap创建一个图库。图库有4x4行照片，我希望用户能够在点击照片时在模态窗口中打开照片。模态窗口应该在一个carousal中显示照片，这样他就可以通过＆＃34; next＆＃34;看到整个图像库。和＆＃34; prev＆＃34;

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

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>

P.S。您会注意到我将旋转木马指示器隐藏在旋转木马中。在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);
  };
});

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

HTML代码

控制器

2 个答案:

Plunker