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

I am trying to create an image gallery using angular ui and bootstrap. The image gallery has 4x4 rows of photos and I want the user to be able to open the photo in a modal window when he clicks on the photo. The modal window should display the photo in a carousal so he can see the entire image gallery by "next" and "prev"

我正在尝试创建一个图像画廊使用角ui和引导。图像库有4 * 4行照片，我希望用户在点击照片时能够在模式窗口中打开照片。模式窗口应该在配偶中显示照片，这样他就可以通过“next”和“prev”看到整个图像库

Below is my code. The modal window opens up but does not contain the carousel.

下面是我的代码。模式窗口打开，但不包含旋转木马。

HTML code

    <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

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

      };

please help me if you can figure out what is wrong here.

如果你能弄清楚这里有什么问题，请帮助我。

2 个解决方案

#1

Here's a demo (It's based off on an older demo I had so it has a slightly different template and some CSS added to make it pretty, but it's the same code described below):

这是一个演示(它基于我以前的一个演示，所以它有一个稍微不同的模板和一些CSS添加，使它更漂亮，但它是相同的代码描述如下):

Plunker

I would refactor your controller so that you don't have to use a separate controller for your modalInstance. That will make it much easier:

我将重构你的控制器，这样你就不必为你的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();
  };
});

Then you just need to make one change to your HTML view so that you are passing the index of the image to the openModal fn:

然后，只需对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. You'll notice that I hid the carousel indicators in the carousel. There's a really ugly unresolved bug in ui-bootstrap 0.13.0 that causes the indicators to be ordered incorrectly if you have a lot of slides. There are two simple options to fix this if you want to use the indicators. One is modify the carousel.html template and remove orderBy:'index' from the indicators. Or, two use the 0.12.x version until fixed. (I'd go for the former).

注意，我在旋转木马中隐藏了旋转木马指示器。在ui-bootstrap 0.13.0中有一个非常丑陋的未解决的bug，如果你有很多幻灯片，它会导致指示错误。如果您想要使用指示器，有两个简单的选项可以解决这个问题。一个是改造旋转木马。html模板和删除orderBy:“索引”从指示器。或者2用0。12。x版本直到固定。(我会选前者)。

#2

Rather than reinvent the wheel (although it can be a good learning experience sometimes) I would suggest you use an existing angular module. I recently used this one in a project and it contains all the features that you're looking for: angular bootstrap lightbox. The basic example will get you up and running with the functionality you're after.

我建议你使用一个现有的角度模块，而不是重新发明*(尽管有时这是一个很好的学习体验)。我最近在一个项目中使用了这个，它包含了您正在寻找的所有特性:角引导灯箱。这个基本示例将让您启动并运行您所追求的功能。

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