कोणीय यूआई बूटस्ट्रैप मॉडल -

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

मैं एक साधारण निर्देश जो जे ब्रूनी के जवाब में के रूप में ही तकनीक का उपयोग करता बनाया है।

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

इस निर्देश के लिए अपने कोड स्विच करने के लिए सिर्फ "एनजी-क्लिक करें" में बदल "खुले एकल मोडल" और समारोह एनजी क्लिक द्वारा चलाई मोडल उदाहरण लौटना चाहिए करने के लिए।

उदाहरण। पहले:

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