$modal: Cannot disable backdrop/keyboard after modal has been instantiated

[georgiosd]

In a common modal with a submit action, we need to be able to change whether the modal can be closed by clicking on the backdrop or by hitting ESC.

example case:

• User clicks submit and is waiting for response from server (there is even an activity indicator)
• User hits ESC by mistake or clicks on backdrop because he gets bored, modal goes poof

[georgiosd]

Also, the $modalProvider.options variable is unused and therefore it's not possible to configure the defaults.

This has no effect:

$modalProvider.options = {
            backdrop: 'static',
            keyboard: false          
        };

[pkozlowski-opensource]

@georgiosd blocking ability to close modal is an interesting use case. I don't think I've got a nice solution to this right now, probably something like AngularJS does with route evens (that you can cancel) would work. But yeh, it is en interesting use-case that we should support this way or another.

As for the issue with default options - could you provide a plunker with a minimal reproduce scenario? We've got tests for this functionality so I would be very, very surprised if it is broken.

[georgiosd]

Hm...

What about allowing to pass a function to keyboard/backdrop properties?
Or replicate the properties in modalInstance?

Re the options: I didn't explain myself fully. You use your own internal reference to the defaults which means that this will work:

$modalProvider.options.keyboard = true;

but this won't:

$modalProvider.options = {
            backdrop: 'static',
            keyboard: false          
        };

    var defaultOptions = {
      backdrop: true, //can be also false or 'static'
      keyboard: true
    };

    return {
      options: defaultOptions, // options is not used anywhere, defaultOptions is
...
}

[pkozlowski-opensource]

Woops, actually 8e7fbf0 covers only part of the problem (default options), didn't mean to close.

[georgiosd]

Another thought would be to allow binding the properties in the scope! Now that scope is supported :)

[ProLoser]

@pkozlowski-opensource perhaps:

var modal = $modal.open( ... );
modal.options( { ... } );
// or
modal.options( 'optionName', newValue);

Might be a non-trivial thing to implement.

[mrextreme]

Any news on this?

[Narretz]

You can do this since forever with the $modalStack: Inject it in the controller, then do something like $modalStack.getTop().value.keyboard = false; Not the nicest way, but it works.

[lucassus]

I believe I've found quite elegant workaround for this issue. We could decorate $modal and $modalStack services with some extra methods for temporary disabling $modalStack.dismiss method:

app.config(function($provide) {

  $provide.decorator('$modal', function($delegate) {
    var open = $delegate.open;

    // decorate newly created modalInstance with some custom methods
    $delegate.open = function() {
      var modalInstance = open.apply(this, arguments);

      modalInstance.freeze = function(freeze) {
        modalInstance._freezed = freeze;
      };

      // return true when the modal instance is freezed and
      // dismiss reason is 'backdrop click' or 'escape key press'
      modalInstance.freezed = function(reason) {
        if (!modalInstance._freezed) { return false; }
        return _.contains(['backdrop click', 'escape key press'], reason);
      };

      return modalInstance;
    };

    return $delegate;
  });

  $provide.decorator('$modalStack', function($delegate) {
    var dismiss = $delegate.dismiss;

    // do nothing when the modal is freezed
    // otherwise fallback to the old behaviour
    $delegate.dismiss = function(modalInstance, reason) {
      if (modalInstance.freezed(reason)) { return; }
      dismiss.apply(this, arguments);
    };

    return $delegate;
  });

});

...and in the modal's controller we could use $modalInstance.freeze method to temporary block backdrop click or esc key press:

var FormCtrl = function($scope, $modalInstance, list) {
  this.$modalInstance = $modalInstance;
  this.list = list;
};

angular.extend(FormCtrl.prototype, {

  submit: function(list) {
    // create/update new record
    var promise = list.isPersisted() ? list.$update() : list.$create();

    // freeze the modal keyboard/backdrop close until request is completed
    this.$modalInstance.freeze(true);
    promise.finally(angular.bind(this, function() {
      this.$modalInstance.freeze(false);
    }));

    // close the modal and resolve it with updated/created record
    promise.then(angular.bind(this, function(list) {
      this.$modalInstance.close(list);
    }));

    return promise;
  },

  cancel: function() {
    this.$modalInstance.dismiss();
  }

});

BONUS. Also we could use this solution for creating a directive for freezing modals when the embedded form was changed.

app.directive('glFreezeModal', function($parse) {
  return {
    restrict: 'A',
    require: 'form',

    link: function(scope, element, attrs, form) {
      var modalInstance = $parse(attrs.glFreezeModal)(scope);

      scope.$watch(function() { return form.$dirty; }, function(dirty) {
        modalInstance.freeze(dirty);
      });
    }
  }
});

This simple directive will prevent a user from accidentally lost his changes by pressing esc key etc.
When the form is modified the dialog could be closed only with the Cancel button.

The complete code is here https://gist.github.com/lucassus/9e7bbb89a630f3390b2f

[getvega]

Great solution @lucassus, works perfectly.