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>

在第三列上,我有一个图标,应该打开一个模式,在其中显示该链接的图像.模态是这个：

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

这是从json检索所有数据(本例中的链接)的js.如您所见,要打开模式,我不使用javascript函数,而仅使用uikit函数使用html.

解决方法:

这是使用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)">

标签：angularjs,uikit,modal-dialog,javascript,jquery
来源： https://codeday.me/bug/20191120/2042970.html