Прослушивание изменений панели подписи в AngularJs

Я использую 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>

В моем контроллере:

Создать блокнот для подписи:

$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();
};

javascript angularjs signaturepad
person das Keks    schedule 27.10.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Не могли бы вы попробовать это?

В HTML измените событие x-ng-init на событие x-ng-mouseup на холсте:

<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 вашим потребностям.

person dbardelas    schedule 27.10.2016
comment
Красиво, танков много! Я только что добавил x-ng-mouseup="checkSignatureAndEmail()" на свой холст, и он отлично работает! - person das Keks; 03.11.2016