用于动态图像的 Angular JS Bootstrap UI 模式

Question

我尝试按照此示例进行操作 How to zoom image with angularJS 这是从 JSON 网站获取图像并且每个 {} 有两个不同的图片链接。我正在尝试通过单击图片并打开模式来放大从我的模型中获得的缩略图。如何将模态绑定到我对图像的点击并传递图像和标题？顺便说一句，现在当模态打开时，它是空的并且宽度很小。它需要至少为 600X600。

"use strict";

var app = angular.module('myApp', ['ngResource','ui.bootstrap']);
app.run(function($templateCache){
  $templateCache.put('modal.html', '<div><a ng-click="$close(true)" class="pull-right">&times close</a><img ng-src="{{vm.options.imageList.images}}"/></div>');
});

app.controller("MainController", ['$scope','$uibModal','$resource', function($scope,$uibModal,$resource) {
   var vm = this;


  $scope.showModal = function(imageName) {

    $scope.ImageName = "vm.imageList.image" +imageName;
    var uibModalInstance = $uibModal.open({
      animation: true,
      scope:$scope,
      templateUrl: 'modal.html'
    });
    };

vm.selectCategory=selectCategory;

vm.options = {

   imageList:[

  {

    images: 'images/IMG_0321.JPG',
    caption: 'cuddly',
    category: 'lake'
  },
  {

    images: 'images/IMG_0050.JPG',
    caption: 'sleepy',
    category: 'lake'
  },

  {

    images: 'images/IMG_0055.JPG',
    caption:  'sleepy',
    category: 'lake',
  },

   {

    images: 'images/IMG_0056.JPG',
    caption: 'cuddly',
    category: 'lake'
  },

  {

    images: 'images/IMG_0059.JPG',
    caption: 'cuddly',
    category: 'lake'
  }


],
};

function selectCategory(pos) {
  vm.selectedCategory = pos;

};

}]);


HTML
 <div class = "row">
    <div class = "col-md-12">

  <div ng-repeat = "image in vm.options.imageList | filter: {category: vm.selectedCategory}">

  <img  class = "thumbnail"  ng-src="{{image.images}}" hspace ="15" vspace ="10" ng-click="showModal()">

Answer 1

您没有在 showModal 函数中传递图像。 这将是解决方法。

<div class = "row">
    <div class = "col-md-12">

       <div ng-repeat = "image in vm.options.imageList | filter: {category: vm.selectedCategory}">
              <img  class="thumbnail"  ng-src="{{image.images}}" hspace ="15" vspace ="10" ng-click="showModal(image.images)">
       </div>
    </div>
</div>

在您的 modal.html 中：

$templateCache.put('modal.html', '<div><a ng-click="$close(true)" class="pull-right">&times close</a><img style="max-width:100%; min-height: 600px;" ng-src="{{imageName}}"/></div>');

还有控制器：

$scope.showModal = function(imageName) {

var uibModalInstance = $uibModal.open({
  animation: true,
  templateUrl: 'modal.html',
  controller: function($scope){
      $scope.imageName = imageName;
  },
  size: 'lg'
});
};