angular ui bootstrap: promise resolved/rejected when modal closed

Question

I'm working on angular and bootstap, using angular-ui-bootstrap bridge library. The thing I want to achieve is to reuse the modal component and wrap it in a promise that would be resolved when the modal is closed successfully (when pressing OK button) or rejected (cancel button pressed or clicked outside of the modal).

As far as I can see, there is the $modal service that comes from the bridge library, it has only one method available: open(options). There is also built-in angular promise implementation: $q. I'm looking for a way on how to combine the two.

I want to have a custom component (a service, factory?) which would provide a startFlow method that would return a promise. Calling startFlow would also open bootstrap modal. When the modal is closed (positively or negatively), the promisewould get resolved or rejected.

Can somebody give a hint on how to implement that? I ddin't manage to find an existing solution so far...

Senator

Answer 1

The result property on the object that is returned by open is a promise that behaves exactly as you describe. In fact the example in the documentation at https://angular-ui.github.io/bootstrap/#/modal uses it:

var modalInstance = $modal.open({
  templateUrl: 'myModalContent.html',
  controller: 'ModalInstanceCtrl',
  size: size,
  resolve: {
    items: function () {
      return $scope.items;
    }
  }
});

modalInstance.result.then(function (selectedItem) {
  $scope.selected = selectedItem;
}, function () {
  $log.info('Modal dismissed at: ' + new Date());
});

Which can be seen working in this Plunker http://plnkr.co/edit/ro5Dnkg0p9wYWlMCRqlN?p=preview

Yorke

Good answer. Google/angular could make life easier for everyone by naming the property .promise instead of .result, which is unguessably thenable. – Calie