Javascript 带图像的Angularjs开放模式

嗨，我有一个表格，我可以显示我上传到服务器上的每个图像的链接。我显示的链接可以从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>

---

这是一个从json（我的例子中的链接）检索所有数据的js。正如您所看到的，要打开模态，我没有使用javascript函数，但我只使用带有uikit函数的html。

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

请点击以下链接

搜索关键字-Modal（ui.bootstrap.Modal）

---

您可以使用“resolve”检查代码将值传递给modal，以打开modal

以下是使用UI引导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>

view.html：

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

您可以通过

src

将对象传递给modal。使用

resolve

你能给我看一下代码吗？你能发布你的javascript代码吗？好的，看我的编辑。正如我写的那样，我不是用函数而是用html和uikit打开模式。如果需要，您可以在此处找到modal的文档：谢谢！您可以使用引导模式

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

.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;
}

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