How to Access Canvas object in ionicModal?


#1

I want to have a canvas on ionicModal by passing templateUrl.MySample code

<ion-modal-view> 

<div id="signature-pad" class="m-signature-pad">
<div class="m-signature-pad--body">
  <canvas></canvas>
</div>
<div class="m-signature-pad--footer">
  <div class="description">Sign above</div>
  <button class="button clear" data-action="clear" ng-click="doSave()">Clear</button>
  <button class="button save" data-action="save">Save</button>
</div>
</div>  
</ion-modal-view> 

My IonicModal Initialization in Controller

$ionicModal.fromTemplateUrl('templates/signature.html', {
    scope: $scope,
    animation: 'slide-in-up'
  }).then(function(modal) {
    $scope.modal = modal;
  });
  $scope.openModal = function() {
    $scope.modal.show();
	alert('sign 1');
	$scope.wrapper = angular.element(document.getElementById("signature-pad"));
	var  canvas=angular.element[1];
	//var  canvas = angular.element($scope.wrapper.find('.canvas'));
	$scope.siganturePad = new SignaturePad(canvas);
  	
  };
  $scope.closeModal = function() {
    $scope.modal.hide();
  };

But the problem when initializing canvas by canvas.getContext(‘2d’) returns “Cannot call method getContext() of undefined”


#2

Hey @Thamil - you should be able to select it directly with angular.element(document.querySelectorAll("canvas"));.