在angularjs中放大点击事件时动态加载的图像

Question

当用户单击每个图像时，我需要放大表格单元格中的图像。 但是这些图像是动态加载的，有一个浏览按钮允许用户选择一个或多个图像。 我该如何继续这个？，在ng点击事件图像应该会释放。 我看到了一个例子——

如何使用角度JS缩放图像

和 但这适用于静态图像。

HTML 代码 ->

<section style="padding: 15px;" class="landing-page" ng-controller="ews" >
<table style="width:50%" border="1" ng-init="load()">
<tr>
<th align="center">First</th>
<th align="center">Last</th>
<th align="center">Age</th>
<th align="center">photo</th>
</tr>
<tr>
<td>AA</td>
<td>AA</td>
<td>25</td>
<td>
<input type="file" multiple file-upload />
</td>
<td align="right">
<div ng-repeat="step in files">
<img id="view" ng-src="{{step.src}}" class="thumbnail" height="50" width="50" ng-click="zoom(step.src)" />
</div>
</td>
</tr>
<tr>
<td>BB</td>
<td>BB</td>
<td>50</td>
<td></td>
<td></td>
</tr>
<tr>
<td>CC</td>
<td>CC</td>
<td>30</td>
<td></td>
<td></td>
</tr>
</table> 
</section>

Angularjs code ->

ews.controller('ews', ['$scope', '$http', function ($scope, $http) {
$scope.files = [];
$scope.$on("fileSelected", function (event, args) {
var r = "d";
var item = args;
$scope.files.push(item);
var reader = new FileReader();
reader.addEventListener("load", function () {
$scope.$apply(function () {
item.src = reader.result;
});
}, false);
if (item.file) {
reader.readAsDataURL(item.file);
}
});

$scope.path = '';
$scope.path2 = '';
$scope.imageUpload = function (event) {
console.log(event)
var files = event.target.files;
var reader = new FileReader();
reader.onload = $scope.imageIsLoaded;
for (var i = 0; i < files.length; i++) {
reader.readAsDataURL(files[i]);
}
}
$scope.zoom = function (filename) {
var imageId = document.getElementById('view');
if (imageId.style.width == "400px") {
imageId.style.width = "300px";
imageId.style.height = "300px";
} else {
imageId.style.width = "400px";
imageId.style.height = "400px";
}
// var modal = document.getElementById('myModal');
// // Get the image and insert it inside the modal - use its "alt" text as a caption
// var img = document.getElementById('view');
// var modalImg = document.getElementById("img01");
//// var captionText = document.getElementById("caption");
// img.onclick = function (filename) {
//     modal.style.display = "block";
//     modalImg.src = filename;
//     //captionText.innerHTML = this.alt;
// }
}
}]);
ewipApp.directive('fileUpload', function () {
return {
scope: true, //create a new scope
link: function (scope, el, attrs) {
el.bind('change', function (event) {
var files = event.target.files;
//var d = diffFiles;
//iterate files since 'multiple' may be specified on the element
for (var i = 0; i < files.length; i++) {
//emit event upward
scope.$emit("fileSelected", {
file: files[i]
});
}
});
}
};
});

谢谢

Answer 1

您可以根据上述要求尝试使用模态框，这里是它的参考链接。

https://www.w3schools.com/howto/howto_css_modal_images.asp

下面是我尝试按照您的代码实现的代码，它可以工作。请尝试一下。

网页代码：

<section style="padding: 15px;" class="landing-page" ng-controller="ews" >
<table style="width:50%" border="1" ng-init="load()">
<tr>
<th align="center">First</th>
<th align="center">Last</th>
<th align="center">Age</th>
<th align="center">photo</th>
</tr>
<tr>
<td>AA</td>
<td>AA</td>
<td>25</td>
<td>
<input type="file" multiple file-upload />
</td>
<td align="right">
<tr ng-repeat="step in files">
<td>
<img id="{{ 'img-' + step.index }}" ng-src="{{step.src}}" class="thumbnail" height="50" width="50" ng-click="zoom(step.file.name)" />
<div id="myModal" class="modal">
<!-- The Close Button -->
<span class="close" ng-click="closeImage()">&times;</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" id="img1">
<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</div>
</tr>
</td>
</tr>
<tr>
<td>BB</td>
<td>BB</td>
<td>50</td>
<td></td>
<td></td>
</tr>
<tr>
<td>CC</td>
<td>CC</td>
<td>30</td>
<td></td>
<td></td>
</tr>
</table> 
</section>

Angularjs code ：

$scope.zoom = function (filename) {
var file = filename;
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('view');
var modalImg = document.getElementById("img1");
modal.style.display = "block";
for (var i = 0; i < $scope.files.length; i++) {
if ($scope.files[i].file.name === file) {
index = i;
break;
}
}
modalImg.src = $scope.files[i].src;
}
$scope.closeImage = function () {
var modal = document.getElementById('myModal');
modal.style.display = "none";
}