Angular UI Bootstrap Modal - jak zapobiegać otwieraniu wielu modów?

Question

Zaimplementowałem dyrektywę modalną i ustawię tło opcji $modal.open na false. Jednak teraz mogę uruchomić wiele modów, aby otworzyć. Czy istnieje sposób, aby zapobiec uruchomieniu przycisku wyzwalania, gdy jeden modał jest otwarty?

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

Dzięki

Answer 1

Użyj logiczną flagę, aby tego uniknąć:

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

Zrobiłem prosty dyrektywę, która wykorzystuje tę samą technikę jak w odpowiedzi J. Bruni.

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

Aby przełączyć swój kod dla tej dyrektywy wystarczy zmienić „ng kliknij” do „open-single-modalne”, a funkcja opalane NG-click musi powrócić modalne instancji.

Przykład. Przed:

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

Po:

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

i

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

Answer 3

odpowiedź

J Bruni jest bardzo dobra, ale zamiast korzystać z dodatkowej zmiennej, wykorzystać to, co już masz z modalInstance. Ponieważ deklarujesz modalną instancję wyżej, zyskujesz także elastyczność, aby użyć tej zmiennej w innym miejscu (np. Kiedy możesz odrzucić okno dialogowe).

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