Phương thức khởi động giao diện người dùng góc - cách ngăn chặn nhiều phương thức mở

Question

Tôi đã triển khai chỉ thị phương thức và đặt phông nền tùy chọn $modal.open thành false. Tuy nhiên, bây giờ tôi có thể kích hoạt nhiều modals để mở. Có cách nào để ngăn nút kích hoạt kích hoạt khi một phương thức được mở không?

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

Cảm ơn

Answer 1

Sử dụng một lá cờ boolean để tránh nó:

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

Tôi đã thực hiện một chỉ thị đơn giản trong đó sử dụng kỹ thuật tương tự như trong câu trả lời J. Bruni của.

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

Để chuyển mã cho chỉ thị này, chỉ cần thay đổi "ng-click" thành "open-single-modal" và chức năng được kích hoạt bằng ng-click phải trả về phiên bản phương thức.

Ví dụ. Trước:

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

Sau:

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

và

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

Answer 3

câu trả lời

J Bruni đang rất tốt, nhưng thay vì sử dụng một biến bổ sung, sử dụng những gì bạn đã có với modalInstance. Vì bạn khai báo cá thể phương thức cao hơn, bạn cũng có thể linh hoạt sử dụng biến đó ở nơi khác (chẳng hạn như khi bạn có thể muốn loại bỏ hộp thoại).

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