Angular JS Bootstrap UI 动态图像模式

Question

我尝试按照这个示例进行操作这是从 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'
});
};

Angular JS Bootstrap UI 动态图像模式

Angular JS Bootstrap UI Modal for Dynamic Images

model-view-controller

angularjs

bootstrap-modal

bootstrap-ui