angularjs - Angular UI Bootstrap 模式

Question

我正在使用 Angular UI Bootstrap 模式（ui.bootstrap.dialog）并且我有背景：true 和背景点击：true。

但是当用户点击离开模式时，我不仅要执行关闭，还要执行其他功能。

我正在查看源代码，认为我可以覆盖 Dialog.prototype._bindEvents 但没有任何运气。

我也认为这可能是原始引导模式中的“隐藏”事件，但我无法捕捉到这个事件。

有没有办法定义一个在背景点击时执行的函数，以及如何去做。

谢谢--MB

Answer 1

我知道这是一个老问题，但是自从我来到这里并后来找到了解决方案......

您可以观看广播到模态范围的“modal.closure”事件，如下所示：

.controller('modalCtrl', function($scope, $modalInstance) {

  $scope.$on('modal.closing', function(event, reason, closed) {
      console.log('reason: ', reason);
  });
})

第二个参数是原因（无论传递给 $close() 方法）。点击背景的原因是背景点击

这是一个工作的笨蛋

Answer 2

您可以使用

backdrop: 'static'

在您的选择中。像这样：

var modalInstance = $modal.open({
    templateUrl: 'myModalContent.html',
    controller: 'ModalInstanceCtrl',
    backdrop: 'static',
    ...
});

Answer 3

您可以在模式中观看范围破坏事件：

$scope.$on('$destroy', function () {});

或者在你的模式中解决dismiss Promise并链接一个通过DI的新承诺。

创建模式时注入一个延迟对象（从不承诺）：

var close = $q.defer();
var modalInstance = $modal.open({
    ...
    closePromise: function () {
        return close;
    }
});

close.promise.then(function ( someData ) {
    // On every modal close
});

在模态中：

//                         resolve       dismiss
$modalInstance.result.then(angular.noop, function () {
    closePromise.resolve( someData );
});

Answer 4

现在正在重写对话框类，但是为了快速和肮脏，您可以修改选项对象以接收要在关闭时调用的函数，并在关闭原型中调用该函数，如果它不为空：

注意closeFn

var defaults = {
    backdrop: true,
    dialogClass: 'modal',
    backdropClass: 'modal-backdrop',
    transitionClass: 'fade',
    triggerClass: 'in',
    resolve:{},
    closeFn:null,  // added with null default
    backdropFade: false,
    dialogFade:false,
    keyboard: true, // close with esc key
    backdropClick: true // only in conjunction with backdrop=true
    /* other options: template, templateUrl, controller */
  };

在关闭原型中：

if (self.options.closeFn!==null) {
   self.options.closeFn();   
}

控制器：

 function doSomething() {
    alert('something');
  }

  $scope.opts = {
    backdrop: true,
    keyboard: true,
    backdropClick: true,
    template:  t, // OR: templateUrl: 'path/to/view.html',
    controller: 'TestDialogController',
    closeFn: doSomething
  };

我在这里嘲笑了这个：http: //plnkr.co/edit/iBhmRHWMdrlQr4q5d1lH ?p=preview

Answer 5

What about over writing my_dlg.handleBackDropClick?