Angular UI Bootstrap modal

Question

I am using Angular UI Bootstrap modal (ui.bootstrap.dialog) and I have backdrop: true & backdropClick: true.

But when user clicks away from the modal, I want to perform not only close but additional functions.

I was looking at the source code thinking I could overwrite Dialog.prototype._bindEvents but have not had any luck doing it.

I also think this might be 'hidden' event in original bootstrap modal, but I was not able to catch this event.

Is there a way to do define a function to execute on backdrop click, and how would one go about it.

Thanks --MB

Answer 1

I know this is an old question, but since I got here and found a solution later...

You can watch the 'modal.closing' event, broadcasted to the modal's scope, like this:

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

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

The second parameter is the reason (whatever is passed to the $close() method). The reason when clicking the backdrop is backdrop click

Here a working plunker

Answer 2

The dialog class is being rewritten right now, but for a quick and dirty you can modify the options object to receive a function to be called on close and in the close prototype, call that function if it isn't null:

Note the 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 */
  };

In the close prototype:

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

Controller:

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

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

I mocked this up here: http://plnkr.co/edit/iBhmRHWMdrlQr4q5d1lH?p=preview

Answer 3

You can watch the scope destory event in the modal:

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

Or resolve the dismiss promise in your modal and chain up a new one passed through DI.

When creating the modal inject a defer object (never the promise):

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

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

And in the modal:

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

Answer 4

You can use

backdrop: 'static'

in your options. Like this:

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

Answer 5

怎么过写my_dlg.handleBackDropClick？