角度UIブートストラップモーダル - 複数のモーダルが開くのを防ぐ方法

Question

私はモーダルディレクティブを実装して、$modal.openオプションの背景をfalseに設定しました。しかし、今では複数のモーダルをトリガして開くことができます。 1つのモーダルが開いたら、トリガーボタンが発射されないようにする方法はありますか？

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

Jブルーニの答えは非常に良いですが、代わりに追加の変数を使用するのではなく、あなたが既に持っているものを使用します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; 
      }); 
     }); 
    }