Pass Value from Modal Directive to Controller - angularjs

Question

I have a directive for signaturePad and i want to send the Signature Data to the controller once the signature is accepted by the user.
Here is the directive
.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'
};
})
I am getting the signature inside the directive but how to pass that to the controller.
The value is coming inside $scope.signature.
Here is the codepen link
https://codepen.io/thesourav/pen/QWLVyjE

Answer 1

Ideal way can be to store that information in service and reuse it. But in this case, I have triggered the emit event and passing the signature once save function is called and catching the same in the controller and accessing the signature.
Below snippet in directive
$scope.save = function () {
$scope.signaturePadModel = {};
$scope.signatureModal.hide();
$scope.$emit('c', $scope.signature);
};
And catching the event in controller as below :
$scope.$on('c', function (event, signature) {
alert(signature);
})
I have forked your codepen example(CodePen) and done the changes. Please test.