角UI引导模式(Angular UI Bootstrap modal)

2019-09-04 04:25发布

我采用了棱角分明的UI引导模式(ui.bootstrap.dialog),我有背景:真backdropClick:真。

但是,当用户单击该模式走,我想执行不仅接近,但附加功能。

我一直在寻找的源代码想我可以覆盖Dialog.prototype._bindEvents,但还没有任何运气这样做。

我也觉得这可能是原自举模式“隐藏”的事件,但我没能赶上这个活动。

有没有办法做定义对背景点击执行功能,以及如何将一个去做。

由于--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:

对话框类是被改写的权利,但对于一个快速和肮脏的,你可以修改选项对象接收功能上接近,在接近原型被调用,调用该函数,如果它不为空:

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



文章来源: Angular UI Bootstrap modal