用於簽名板的角形自定義模板

Question

因此，我正在嘗試為使用簽名板指令作為字段的角度形式庫編寫自定義模板。 我已經能夠使用基本模板方法來顯示簽名板：

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創建了一個模態，在其中顯示任何必要的信息，然后將模態結果返回給字段本身的模型。 效果很好。