Привязка диалогового окна к моему угловому контроллеру

Question

Я пытаюсь привязать модальный диалог MetroUI к свойству углового контроллера. Таким образом, я могу показать и скрыть диалог, используя привязку.

ДИРЕКТИВА

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">

Таким образом, я могу управлять открытием диалога, установив логическое значение vm.isDialogVisible на моем контроллере.

Проблема в том, что я пытаюсь обновить атрибут vm.isDialogVisible, когда пользователь закрывает диалог (с помощью кнопки закрытия). У кого-нибудь есть идеи, как это исправить?

Answer 1

Всегда круто найти собственное решение (заняло у меня день:-)). Я сделал ошибку, чтобы использовать функции отображения / скрытия элемента. Я должен был использовать атрибут данных элемента. Таким образом, я могу получить доступ к

onDialogClose

функция, которая позволяет мне обновить область. Ниже моего решения

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();
                }
            });
        }
    }
}]);