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('.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.
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./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.
Share Improve this question edited May 17, 2015 at 17:58 Atlas91 asked May 17, 2015 at 16:16 Atlas91Atlas91 5,90417 gold badges75 silver badges148 bronze badges 6-
you can pass an object to modal with
src
in it. usingresolve
– batmaniac7 Commented May 17, 2015 at 16:34 - Can You please show me with the code? – Atlas91 Commented May 17, 2015 at 17:32
- can you post your javascript code? – batmaniac7 Commented May 17, 2015 at 17:55
- Ok, see my edit. As i wrote i open the modal not with a function but with html and uikit. You can find the documentation of modal here if you need: getuikit./docs/modal.html thanks! – Atlas91 Commented May 17, 2015 at 17:59
- you can use bootstrap modal – user4692688 Commented May 18, 2015 at 11:21
2 Answers
Reset to default 2your 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
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">×</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)">