Angular JS - 类型错误：无法调用 null 的方法'getContext'

Question

我是混合应用程序和使用Ionic框架开发应用程序的新手，我想在ng-repeat中实现多签名板。画布显示为具有已定义的css规范。但是，签名的绘制不起作用。

签名.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));
}

在Logcat中，我看到一行TypeError:无法调用null的方法"getContext"

注意：当我在ng-repeat 之外尝试单个签名板时，它运行良好

请帮我找到解决方案。

Answer 1

尝试将ng init更改为ng click以检查其是否工作，问题i您需要等待ng repeat完成，然后调用createSigPad，最好按照指示来做。

您可以尝试此选项：你的html需要是

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

你的功能需要是：

$scope.createSigPad=function($event){
 new SignaturePad($event.currentTarget);

}

通过这种方式，您可以获得元素目标