Question

我有一个signaturePad指令，我希望一旦用户接受签名，就将签名数据发送到控制器。

这是指令

.directive('signature', function ($ionicModal) {
    var canvas = null,
      ratio = 1.0;

    return {
      scope: {
        signature: '=ngModel'
      },
      link: function ($scope, $element, $attrs, $controller) {
        $scope.signature = null;
        $scope.signaturePadModel = {};

        $ionicModal.fromTemplateUrl('modal.html', {
          animation: 'slide-in-up',
          scope: $scope,
        }).then(function(modal) {
          $scope.signatureModal = modal;
        });

        $scope.$on('$destroy', function () {
          $scope.signatureModal.remove();
        });

        $scope.openSignatureModal = function () {
          $scope.signatureModal.show();
          canvas = angular.element($scope.signatureModal.modalEl).find('canvas')[0];

          $scope.signaturePad = new SignaturePad(canvas, {
            backgroundColor: '#FFF',
            minWidth: 1,
            maxWidth: 1.5,
            dotSize: 3,
            penColor: 'rgb(66, 133, 244)',
            onEnd: function () {
              $scope.signature = $scope.signaturePad.toDataURL();
            }
          });

          if ($scope.signature) {
            $scope.signaturePad.fromDataURL($scope.signature);
          }
          $scope.resizeCanvas();
        };

        $scope.resizeCanvas = function () {
          canvas.width = canvas.offsetWidth * ratio;
          canvas.height = canvas.offsetHeight * ratio;
          canvas.getContext('2d').scale(ratio, ratio);          
        };

        $scope.clear = function () {
          $scope.signaturePadModel.signatureConfirm = false;
          $scope.signaturePad.clear();
          $scope.signature = null;
        };

        $scope.save = function () {
          $scope.signaturePadModel = {};
          $scope.signatureModal.hide();
        };
      },
      require: 'ngModel',
      replace: true,
      restrict: 'A',
      templateUrl: 'signatureButton.html'
    };
  })

我正在指令中获取签名，但如何将其传递给控制器。

该值位于$ scope.signature中。

这是codepen链接 https://codepen.io/thesourav/pen/QWLVyjE

Answer 1

理想的方法可以是将该信息存储在服务中并重新使用。但是在这种情况下，一旦调用save函数，就触发了发射事件并传递签名，并在控制器中捕获该签名并访问签名。指令

中的以下代码段

    $scope.save = function () {
      $scope.signaturePadModel = {};
      $scope.signatureModal.hide();
      $scope.$emit('c', $scope.signature);
    };

并在控制器中捕获事件，如下所示：

  $scope.$on('c', function (event, signature) {
      alert(signature);
  })

我已将您的codepen示例（CodePen）分叉并进行了更改。请测试。

将值从模态指令传递到控制器

1 个答案: