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

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 Boolean на мой контроллер.

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

Answer 1

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

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