Question

因此，我尝试为使用angular-formly作为字段的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>'
    });
});

但是，我遇到的问题是，在主控制器的范围内无法访问单击“接受”按钮后接受返回值的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创建了一个模态，在其中显示任何必要的信息，然后将模态结果返回给字段本身的模型。效果很好。

用于签名板的角形自定义模板

1 个答案: