I need to open a Popup windows with an image on it. But I'm not managing to make the link between the image and the popup to work, how do I right it correctly?
Here's the code for the js popup controller:
$scope.imginstaFull = function() {
$scope.data = {};
$scope.imgFull = 'img/teste/insta1.jpg';
// An elaborate, custom popup
var myImg = $ionicPopup.show({
template: '<ion-list style="color:black;">'+
'<img style="height:67vw; width:90%; border-radius:10px;
margin:5%; background-image:url({{imgFull}});">'+
'</ion-list>',
buttons: [
{
text: '<i class="icon button-icon ion-ios-close-outline"></i>',
type:'popclose',
}
]
});
and here's the code for the html image that I want to open:
<div class="col col-33 paddingPerfil colinstagram" style="background-image:url('img/teste/insta1.jpg')">
<button class="button button-clear button-full" ng-click="imginstaFull()"></button>
</div>
I see you are using {{imgFull}}
to reference the image inside the popup options. By sharing the original scope (using the scope: $scope
attribute inside the $popup.show
options, you should be able to access the $scope.imgFull
you originally declared.
For example:
$scope.imgFull = 'img/teste/insta1.jpg';
var myImg = $popup.show({
template: '<img style="background-image:url({{imgFull}});"></img>',
scope: $scope,
buttons: [
{
text: '<i class="icon button-icon ion-ios-close-outline"></i>',
type:'popclose',
}
]
});