使用角度指令时，防止在单击页面时关闭角度模态弹出窗口

Question

我正在使用指令进行模态弹出

mymodule.directive('modalDialog', function() {
  return {
    restrict: 'E',
    scope: {
      show: '='
    },
    replace: true, 
    transclude: true,
    link: function(scope, element, attrs) {
      scope.dialogStyle = {};
      if (attrs.width)
        scope.dialogStyle.width = attrs.width;
      if (attrs.height)
        scope.dialogStyle.height = attrs.height;
        if (attrs.overflow)
        scope.dialogStyle.overflow = attrs.overflow;
      scope.hideModal = function() {
        scope.show = false;
      };
    },
    template: "<div class='ng-modal' ng-show='show'><div class='ng-modal-overlay' ng-click='hideModal()'></div><div class='ng-modal-dialog' ng-style='dialogStyle'><div class='ng-modal-close' ng-click='hideModal()'><i class='fa fa-times-circle'></i></div><div class='ng-modal-dialog-content' ng-transclude></div></div></div>"// See below
  };
});

它

工作正常，但是当我单击页面中的任何位置时，模态弹出窗口会关闭。我该如何防止它？

Answer 1

<div class='ng-modal-overlay' ng-click='hideModal()'></div> 带有ngClick指令的覆盖元素，该指令在单击事件时调用hideModal。删除它应该会阻止弹出窗口关闭。

Answer 2

要停止单击事件，请在后台 html 标记上添加以下代码：

ng-click="$event.preventDefault()"

查看演示 http://plnkr.co/edit/2MWIpOs3uAG5EFQy6Ndn?p=preview