CODEWITHSUNDEEP
javascriptjqueryangularjsmodal-dialoguikit
Atlas91
Atlas91

Reputation: 5904

Angularjs open modal with image

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

       <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-src of the modal. How could i do it?

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.

Upvotes: 4

Views: 12808

Answers (2)

Yaro
Yaro

Reputation: 684

Here's better solution using 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)">

Upvotes: 2

user4692688
user4692688

Reputation:

your approach is wrong to open modal

please follow following link

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

search keyword - Modal (ui.bootstrap.modal)

you can pass value to modal using 'resolve' check code to open modal

Upvotes: 2

Related Questions