2

我尝试按照这个示例如何使用 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()">
4

1 回答 1

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'
});
};
于 2018-09-27T08:27:15.890 回答