I am creating ticket qrcodes on the fly and attaching them to an ng-repeat in a modal when a user clicks a button to open the modal. It works. If the modal stays open, then every 5 minutes the tickets refresh, deleting the original canvas and reattaching a new one. That works too. If the user closes the modal and reopens the modal, it continues to work as designed- if a canvas drawing exists, delete it and reattach a new one.
But if the user leaves the page view, returns to the page view and reopens the modal the canvas HTML is being generated and being attached properly but the image itself is not there.
I am using this jquery-qrcode in my project: http://jeromeetienne.github.com/jquery-qrcode
The button click code to open the modal and code to generate qrCode :
$scope.openTicketModal = function() {
// this interval is need to let ng-repeat in modal populate
// before triggering the genQRCode() function - otherwise, the genQRCode()
// will create the code and try to attach the `canvas` to the DIV
// before the div is actually rendered - causing it to fail.
if ($scope.club.tickets.length > 0) {
var tik = $scope.club.tickets[$scope.club.tickets.length-1] ;
var lastTicket = gf.ang("ticketID_"+tik.ticketID) ;
$scope.ticketInit = $interval(function() {
// only generate qrCodes after last ticket element has been created in modals ng-repeat
if (lastTicket) {
$scope.genQRCode() ;
$interval.cancel($scope.ticketInit) ;
}
},100) ;
$scope.tixModal.show() ;
}
}
//gf.ang = return angular.element('#elementID')
//gf.elm = return angular.element('#elementID')[0] ;
$scope.genQRCode = function() {
$scope.refreshTickets = 1 ;
clubService.getTickets($scope.club.cID,$scope.club.clID,$scope.club.ceID)
.then(function(response) {
$scope.refreshTickets = 0 ;
if (response.success == true) {
for (var x=0;x<response.tickets.length;x++) {
var ticket = response.tickets[x] ;
var tikImgDiv = gf.elm('ticketID_'+ticket.ticketID) ;
// if a canvas already added, then delete it.
// first element is ghost element to be cloned and used for new canvas
console.log(tikImgDiv) ;
console.log('div' +tikImgDiv.children.length) ;
if (tikImgDiv.children.length > 1) {
console.log("deleteing clonsed div w/ canvas") ;
tikImgDiv.removeChild(tikImgDiv.lastChild) ;
}
// clone hidden div & use clone to reattach new canvas
var tikImg = gf.elm('ticketID_img') ;
var clone = tikImg.cloneNode(true) ;
//use unique 'tixCounter' to ensure DIV is never cached.
clone.id = 'ticketID_img_' + $rootScope.tixCounter ;
clone.style.display = "" ;
tikImgDiv.appendChild(clone) ;
if (ticket.ticketRefund == 0) {
var refund = "No" ;
} else {
var refund = "Yes" ;
}
$scope.ticketCSS[ticket.ticketID].refunds = refund ;
$scope.ticketCSS[ticket.ticketID].trans = "No" ;
$scope.ticketCSS[ticket.ticketID].desc = ticket.ticketDesc ;
jQuery('#ticketID_img_'+$rootScope.tixCounter).qrcode({width:150,height:150,text:ticket.liveCode}) ;
$rootScope.tixCounter++ ;
}
}
}) ;
HTML in page view modal:
<div id="ticketContainer" ng-show="!refreshTickets" class="ticketContainer">
<div id="ticketID_{{ticket.ticketID}}" class="centerDivContents">
<div id="ticketID_img" class="centerDivContents" ></div>
</div>
</div>
The page state:
.state('tab.clubs', {
cache: true,
url: '/clubs',
params: tabParams,
views: {
'tab-clubs': {
templateUrl: 'templates/tab-clubs.html',
controller: 'ClubCtrl'
}
}
})
.state('tab.club-detail', {
cache: false,
url: '/clubs/:ceID',
params: tabParams,
views: {
'tab-clubs': {
templateUrl: 'templates/detail-clubs.html',
controller: 'ClubDetailCtrl'
}
}
})
On a side note, if I change the tab.club-detail page cache: true, then everything works just fine…no issues. I don’t know why…and it doesn’t make sense to me as one would think caching would cause more issues. But regardless, I need the page cache: false set for the pageview for a variety of other reasons.