Question

您好我有一张桌子，我可以在其中显示我在服务器上传的每张图片的链接。我显示的链接我可以从json获取它们。这就是我正在做的事情

<!-- 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>

在第三列我有一个图标应该打开一个模式，其中显示该链接的图像。模式就是这个：

ng-src

问题是我不知道如何通过模态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. });中的正确链接。我怎么能这样做？

编辑：

{{1}}

这是从json（我的情况下的链接）中检索所有数据的js。正如你所看到的，打开模态我不使用javascript函数，但我只使用带有uikit函数的html。

Answer 1

这是使用UI Bootstrap 3的更好解决方案：

controller.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：

<div class="modalImage">
  <div class="modal-header">{{selectedImg.header}} 
     <button ng-click="$dismiss()" class="close pull-right" 
             aria-hidden="true">&times;</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：

.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：

<img ng-src="{{image-1-source}}"
     alt="{{image-1-name}}"
     ng-click="openModalImage(image-1-source, image-1-name)">

Answer 2

你的方法是错误的打开模态

请点击以下链接

https://angular-ui.github.io/bootstrap/

搜索关键字 - 模态（ui.bootstrap.modal）

您可以使用'resolve'检查代码将值传递给模态以打开模态

Angularjs用图像打开模态

2 个答案: