angular-formly 自定义签名板模板

Question

所以我正在尝试为 angular-formly librarythat uses the signature pad directive 编写自定义模板作为字段。我已经能够使用基本模板方法来显示签名板：

app.run(function(formlyConfig) {
    formlyConfig.setType({
        name: 'signaturePad',
        template: '<signature-pad accept="accept" clear="clear"' +
            'height="220" width="568"></signature-pad>' +
            '<button ng-click="clear()">Clear signature</button>' +
            '<button ng-click="signature = accept()">Sign</button>'
    });
});

但是，我遇到的问题是在主控制器的范围内无法访问单击“接受”按钮后接受 return 值的 signature 变量。

也许更清晰的问题版本是：

 app.run(function(formlyConfig) {
    formlyConfig.setType({
        name: 'helloWorldButton',
        template: '<button ng-click="vm.clicked()">Sign</button>'
    });
});

如何访问应用程序控制器中的函数 vm.clicked()。表单本身在 ng-controller 范围内声明：

<div ng-controller="controllerName as ctrl">    
    <form ng-submit="ctrl.onSubmit()">
        <formly-form model="ctrl.userData" fields="ctrl.userFields">
            <button type="ctrl.submit">Submit</button>
        </formly-form>
    </form>
</div>

Answer 1

对于所有相关人员，我设法想出了一种不同的方法来实现它。

app.run(function(formlyConfig) {
    formlyConfig.setType({
        name: 'signaturePad',
        template: '<button ng-click="openSigPad()">Sign</button>',
        controller: function($scope, $uibModal) {
            ...
            $scope.openSigPad = $uibModal.open(...);
            .then(function(result) {
                $scope.model[$scope.options.key] = result;
            });
        }
    });
});

这样，我使用 UI Bootstrap 创建了一个模态，在其中显示任何必要的信息，然后 return 模态结果返回到字段本身的模型。效果很好。

angular-formly 自定义签名板模板

angular-formly custom template for signature pad

javascript

angularjs

angular-formly