Angular UI Bootstrap Modal - 如何防止多個模式打開

Question

我已經實現了模態指令，並將$modal.open選項背景設置爲false。不過，現在我可以觸發多種模式打開。有一種方法可以防止觸發按鈕在一個模式打開後觸發嗎？

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()); 
     }); 
    }; 
}; 

感謝

Answer 1

使用布爾標誌，以避免它：

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

我做了一個簡單的指令，它使用相同的技術，在J.布呂尼的回答。

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

要切換代碼這個指令只是改變「NG單擊」通過NG-點擊炒魷魚「開單模式」和函數必須返回模式實例。

例子。之前：

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

後：

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

和

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

Answer 3

Ĵ布呂尼的回答是非常好的，但，而不是使用一個額外的變量，使用你已經擁有與modalInstance。由於您將模態實例聲明得更高，因此您還可以靈活地在其他地方使用該變量（例如，當您想要關閉對話框時）。

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; 
      }); 
     }); 
    }