javascript Angularjs 用图像打开模态
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30289101/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angularjs open modal with image
提问by End.Game
Hi i have a table in which i can show the links of each image i upload on server. The links i show i can get them from a json. This is what i'm doing
嗨，我有一个表格，我可以在其中显示我上传到服务器上的每个图像的链接。我显示的链接我可以从 json 中获取它们。这就是我正在做的
<tbody>
<tr ng-repeat="wall in walls">
<td>{{wall.id}}</td>
<td>{{wall.link}}</td>
<td><a href="#imdage_modal" data-uk-modal><i class="uk-icon uk-icon-eye"></a></td>
</tr>
<tbody>
on the third column i have a icon that should be open a modal in which show the image from that link. The modal is this one:
在第三列上，我有一个图标，该图标应该打开一个模式，其中显示来自该链接的图像。模态是这样的：
<!-- Image modal -->
<div id="imdage_modal" class="uk-modal">
<div class="uk-modal-dialog">
<a href="" class="uk-modal-close uk-close uk-close-alt"></a>
<img ng-src="" alt="">
</div>
The problem is that i don't know how pass the correct link in the ng-srcof the modal. How could i do it?
问题是我不知道如何ng-src在模态中传递正确的链接。我怎么能做到？
EDIT:
编辑：
function($scope, $http) {
$http.get('https://www.mywebsite.com/images/getimages.php').
success(function(data, status, headers, config) {
$scope.walls = data.walls;
console.log($scope.walls);
}).error(function(data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
This is the js to retreive all datas from json (the links in my case). As you can see, to open modal i not use a javascript function but i use only html with uikit functions.
这是从 json 中检索所有数据的 js（在我的例子中是链接）。如您所见，要打开模态，我没有使用 javascript 函数，但我只使用带有 uikit 函数的 html。
回答by End.Game
your approach is wrong to open modal
你打开模态的方法是错误的
please follow following link
请按照以下链接
https://angular-ui.github.io/bootstrap/
https://angular-ui.github.io/bootstrap/
search keyword - Modal (ui.bootstrap.modal)
搜索关键字 - 模态（ui.bootstrap.modal）
you can pass value to modal using 'resolve' check code to open modal
您可以使用“解决”检查代码将值传递给模态以打开模态
回答by Yaro
Here's better solution using UI Bootstrap 3:
这是使用 UI Bootstrap 3 的更好解决方案：
controller.js :
控制器.js：
$scope.openModalImage = function (imageSrc, imageDescription) {
$modal.open({
templateUrl: "path/to/modalImage.html",
resolve: {
imageSrcToUse: function () {
return imageSrc;
},
imageDescriptionToUse: function () {
return imageDescription;
}
},
controller: [
"$scope", "imageSrcToUse", "imageDescriptionToUse",
function ($scope, imageSrcToUse, imageDescriptionToUse) {
$scope.ImageSrc = imageSrcToUse;
return $scope.ImageDescription = imageDescriptionToUse;
}
]
});
};
modalImage.html:
modalImage.html：
<div class="modalImage">
<div class="modal-header">{{selectedImg.header}}
<button ng-click="$dismiss()" class="close pull-right"
aria-hidden="true">×</button>
<div class="clearfix"></div>
</div>
<div class="modal-body">
<div class="image-wrapper">
<a ng-href="{{ImageSrc}}" target="_blank">
<img ng-src={{ImageSrc}}>
</a>
</div>
<div class="text-muted image-description">{{ImageDescription}}
</div>
</div>
</div>
style.css:
样式.css：
.modalImage .image-wrapper {
text-align: center;
}
.modalImage .image-wrapper img {
max-width: 560px;
max-height: 560px;
}
.modalImage .image-description {
text-align: center;
margin-top: 10px;
}
view.html:
视图.html：
<img ng-src="{{image-1-source}}"
alt="{{image-1-name}}"
ng-click="openModalImage(image-1-source, image-1-name)">
