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

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

1 个答案: