0

I am new to hybrid applications and developing an application using Ionic framework in which I would like to implement a multiple signature pad inside ng-repeat. The canvas is displayed with the defined css specifications.But,the drawing the signature is not working.

signature.html

 <div   ng-repeat="esign in consent" > 
 <div ><!--Signature Pad -->
    <canvas  id="{{'canvas'+$index}}"  ng-init="createSigPad($index)" width='300' height='180'  style='border: 1px solid blue;'></canvas>
    <div class='button-bar'>
    <a class='button button-energized' >Clear</a>
    <a class='button button-balanced' >Save</a>
    </div>
    </div> 
    </div>

controller.js

$scope.createSigPad=function(index){

     // alert(document.getElementById('canvas'+index).id);
     new SignaturePad(document.getElementById('canvas'+index));

}

In the Logcat I see the line TypeError: Cannot call method 'getContext' of null

Note: It is working fine when I tried a single Signature pad outside of ng-repeat

Please help me finding the solution.

Rakesh L
  • 1,136
  • 4
  • 18
  • 44

1 Answers1

0

try to change ng-init to ng-click to check if its work, the problem i you need to wait until ng-repeat are finish and then call to createSigPad, better do this with directive.

you can try this option: your html need to be

<canvas  ng-init="createSigPad($event)" width='300' height='180'  style='border: 1px solid blue;'></canvas>

your function need to be:

$scope.createSigPad=function($event){

 new SignaturePad($event.currentTarget);

}

with this way you get the element target

Avishai Peretz
  • 112
  • 1
  • 10