Angular UI Bootstrap模式

Question

我正在使用Angular UI Bootstrap模式（ui.bootstrap.dialog），我有背景：true和backdropClick：true。

但是当用户点击模态时，我不仅要执行近距离功能，还要执行其他功能。

我在看源代码，以为我可以覆盖Dialog.prototype._bindEvents但是没有运气这样做。

我也认为这可能是原始bootstrap模式中的“隐藏”事件，但我无法捕获此事件。

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

谢谢--MB

Answer 1

我知道这是一个老问题，但是因为我来到这里后发现了一个解决方案......

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

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

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

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

这是一个工作的plunker

Answer 2

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

注意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 3

您可以在模态中观察范围destory事件：

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

或者解决你的模态中的解雇承诺，并链接一个通过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

您可以使用

backdrop: 'static'

在你的选择中。 像这样：

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

Answer 5

怎么过写my_dlg.handleBackDropClick？