Angular UI Bootstrap Modal - how to prevent multiple modals from opening

Question

I applied the modal directive and set the $modal.open option to false . However, now I can run several modals to open. Is there a way to prevent the trigger button from starting after one modal is open?

 var accountSummaryCtrl = function ($scope, $modal, $log) { $scope.open = function () { var modalInstance = $modal.open({ templateUrl: '/Apps/generic/modal/Templates/AccountSummary.html', controller: ModalInstanceCtrl, backdrop: false }); modalInstance.result.then(function (selectedItem) { $scope.selected = selectedItem; }, function () { $log.info('Modal dismissed at: ' + new Date()); }); }; }; 

thanks

Answer 1

Use the boolean flag to avoid this:

 var accountSummaryCtrl = function ($scope, $modal, $log) { var opened = false; $scope.open = function () { if (opened) return; var modalInstance = $modal.open({ templateUrl: '/Apps/generic/modal/Templates/AccountSummary.html', controller: ModalInstanceCtrl, backdrop: false }); opened = true; modalInstance.result.then(function (selectedItem) { $scope.selected = selectedItem; opened = false; }, function () { $log.info('Modal dismissed at: ' + new Date()); opened = false; }); }; }; 

Answer 2

I made a simple directive that uses the same technique as in J. Bruni's answer.

 /** * Directive which helps to prevent multiple modals opened when clicking same button many times. * * Just replace "ng-click" with "open-single-modal" in your html. Example: * * <button open-single-modal="openModal()">Open Window</button> * * NOTICE! "openModal()" function must return modalInstance which is a result of "$uibModal.open()" */ app.directive('openSingleModal', function() { return { restrict: 'A', link: function(scope, element, attrs) { var opened = false; element.bind('click', function () { if(opened) { return; } opened = true; var modalInstance = scope.$eval(attrs.openSingleModal); if(!modalInstance || !modalInstance.result || typeof modalInstance.result.then !== 'function') { console.error('Incorrect modal instance returned from the open modal function', element, modalInstance); return; } modalInstance.result.then(function () { opened = false; }, function () { opened = false; }); }); } }; }); 

To switch the code for this directive, just change "ng-click" to "open-single-modal", and the function launched by ng-click should return a modal instance.

Example. Before:

<a ng-click="openModal()">Open Me!</a>

After:

<a open-single-modal="openModal()">Open Me!</a>

and

 $scope.openModal = function() { return $uibModal.open(...); }; 

Answer 3

J Bruni's answer is very good, but instead of using an extra variable, use what you already have with modalInstance . Since you declare a modal instance above, you also get the flexibility to use this variable elsewhere (for example, when you might need to reject a dialog).

  link: function(scope, element, attrs) { var modalInstance; /*assign to undefined if you like to be explicit*/ element.bind('click', function () { if(modalInstance) { return; } modalInstance = scope.$eval(attrs.openSingleModal); if(!modalInstance || !modalInstance.result || typeof modalInstance.result.then !== 'function') { console.error('Incorrect modal instance returned from the open modal function', element, modalInstance); return; } modalInstance.result.then(function () { modalInstance = undefined; }, function () { modalInstance = undefined; }); }); }