AngularJsの署名パッドの変更を聞く

Question

私はsignature_padと私のウェブアプリケーション（x-ng-disabled="!checkSignatureAndEmail()"）を続ける前に記入する必要がある電子メールテキストフィールドを使用しています。

テキストフィールドにはng-modelが含まれているため、変更はすぐに認識されますが、署名パッドはプレーンJavaScriptです。だから私が最初に電子メールを入力してサインパッドにサインインすると、ボタンは有効になりません。

リスナーなどを登録する方法はありますか？はいの場合、私はどうしましたか？私のコントローラで

<div class="container"> 
    <div class="modal fade" id="signatureDialog" role="dialog"> 
     <div class="modal-dialog modal-lg"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal">&times;</button> 
        <h4 class="modal-title">Bestellung best&auml;tigen</h4> 
       </div> 
       <div class="modal-body"> 
        <p>Mit ihrer Unterschrift best&auml;tigen Sie... bla bla..</p> 
        <input type="text" class="form-control" x-ng-model="email"> 
        <br> 
        <canvas id="signature-pad" width="700" height="150" style="border:1px solid #B0B0B0; border-radius: 4px;" x-ng-init="initSignaturePad()"></canvas> 
        <br> 
        <button type="button" class="btn btn-default" x-ng-click="signaturePad.clear()">Clear</button> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-primary" x-ng-disabled="!checkSignatureAndEmail()" x-ng-click="saveOrder(orderInput)" data-dismiss="modal">Best&auml;tigen</button> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Abbrechen</button> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

：

SignaturePad作成：

$scope.initSignaturePad = function() { 
    $scope.signaturePad = new SignaturePad(document.getElementById('signature-pad'), { 
      minWidth: 1.2, 
      maxWidth: 3, 
      backgroundColor: 'rgba(250, 250, 250, 1)', 
      penColor: 'rgb(0, 0, 100)' 
    }); 
} 

検証機能を：

$scope.checkSignatureAndEmail = function() { 
    var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; 
    return re.test($scope.email) && !$scope.signaturePad.isEmpty(); 
}; 

Answer 1

あなたはこれを試してもらえますか？あなたのHTMLで

、キャンバスでX-NG-のmouseupイベントにX-NG-INITを変更：

<canvas id="signature-pad" x-ng-mouseup="initSignaturePad()"></canvas> 

そして、あなたのコントローラで：

$scope.emptyCanvas = true; 

    $scope.$watch('emptyCanvas', function() { 
     $scope.checkSignatureAndEmail(); 
    }); 

    $scope.checkSignatureAndEmail = function() { 
     var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; 
     return re.test($scope.email) && !$scope.emptyCanvas; 
    }; 

    $scope.initSignaturePad = function() {  
     $scope.emptyCanvas = $scope.signaturePad.isEmpty(); 
    }; 

これは、のために働きます私は、x-ng-mouseupがあなたのニーズに合っているかどうかわかりません。