Binding the Dialog to my angular controller - metro-ui-css

Question

I am trying to bind a MetroUI modal dialog to an angular controller property. This way I can show and hide the dialog using binding.
DIRECTIVE
appMod.directive('showDialog', ['$timeout', function ($timeout): ng.IDirective {
return {
restrict: 'A',
link: function (scope, element, attrs, ngModel) {
scope.$watch(attrs.showDialog, function (value) {
if (value) {
element.show();
}
else {
element.hide();
}
});
}
}
}]);
HTML:
<div class="padding20 dialog" id="dialog9"
data-role="dialog" data-close-button="true"
data-overlay="true" data-overlay-color="op-dark"
show-dialog="vm.isDialogVisible">
This way I can control opening the dialog by setting the vm.isDialogVisible Boolean on my controller.
Problem is that I am trying to update the vm.isDialogVisible attribute when the user closes the dialog (via the close button). Anyone has some ideas how to fix that?

Answer 1

It is always cool to find your own solution (took me a day :-)). I made a mistake to use the show / hide features of the element. I should have used the data attribute of the element. That way I am able to access the
onDialogClose
function, which enable me to update the scope. Below my solution
appMod.directive(showDialog, ['$timeout','$parse',function ($timeout, $parse){
return {
restrict: 'A',
scope:false,
link: function (scope, element, attrs) {
var e1 = theDialog.data('dialog');
$timeout(() => {
e1.options.onDialogClose = (dialog) => {
var model = $parse(attrs.showDialog);
model.assign(scope, false);
scope.$digest();
};
}, 0);
scope.$watch(attrs.showDialog, function (value) {
if (value) {
e1.open();
}
else {
e1.close();
}
});
}
}
}]);