बूटस्ट्रैप मॉडल

Question

के लिए सरल कोणीय निर्देश किसी के पास बूटस्ट्रैप मोडल स्वचालित रूप से दिखाने के लिए एक सरल निर्देश है? बूटस्ट्रैप 3 में उन्होंने मोडल को स्वचालित रूप से दिखाने की क्षमता को हटा दिया ताकि मैं एक कोणीय एनजी-शो शो ब्लॉक का उपयोग न कर सकूं। कोई भी मदद बहुत अच्छी रहेगी।

Answer 1

कोणीय 1.2 & बूटस्ट्रैप 3.1.1 के लिए अपडेट किया गया: http://embed.plnkr.co/WJBp7A6M3RB1MLERDXSS/

मैं Ender2050 के जवाब बढ़ाया तो निर्देश एक अलग गुंजाइश नहीं है। इसका मतलब है कि मोडल सामग्री में स्कोप ऑब्जेक्ट्स के संदर्भ हो सकते हैं। निर्देश विशेषता का भी पुन: उपयोग करें ताकि केवल एक विशेषता की आवश्यकता हो।

app.directive("modalShow", function ($parse) { 
    return { 
     restrict: "A", 
     link: function (scope, element, attrs) { 

      //Hide or show the modal 
      scope.showModal = function (visible, elem) { 
       if (!elem) 
        elem = element; 

       if (visible) 
        $(elem).modal("show");      
       else 
        $(elem).modal("hide"); 
      } 

      //Watch for changes to the modal-visible attribute 
      scope.$watch(attrs.modalShow, function (newValue, oldValue) { 
       scope.showModal(newValue, attrs.$$element); 
      }); 

      //Update the visible value when the dialog is closed through UI actions (Ok, cancel, etc.) 
      $(element).bind("hide.bs.modal", function() { 
       $parse(attrs.modalShow).assign(scope, false); 
       if (!scope.$$phase && !scope.$root.$$phase) 
        scope.$apply(); 
      }); 
     } 

    }; 
}); 

उपयोग:

<div modal-show="showDialog" class="modal fade"> ...bootstrap modal... </div> 

Answer 2

यहां एक कोणीय निर्देश है जो बूटस्ट्रैप मोडल को छुपाएगा और दिखाएगा।

app.directive("modalShow", function() { 
    return { 
     restrict: "A", 
     scope: { 
      modalVisible: "=" 
     }, 
     link: function (scope, element, attrs) { 

      //Hide or show the modal 
      scope.showModal = function (visible) { 
       if (visible) 
       { 
        element.modal("show"); 
       } 
       else 
       { 
        element.modal("hide"); 
       } 
      } 

      //Check to see if the modal-visible attribute exists 
      if (!attrs.modalVisible) 
      { 

       //The attribute isn't defined, show the modal by default 
       scope.showModal(true); 

      } 
      else 
      { 

       //Watch for changes to the modal-visible attribute 
       scope.$watch("modalVisible", function (newValue, oldValue) { 
        scope.showModal(newValue); 
       }); 

       //Update the visible value when the dialog is closed through UI actions (Ok, cancel, etc.) 
       element.bind("hide.bs.modal", function() { 
        scope.modalVisible = false; 
        if (!scope.$$phase && !scope.$root.$$phase) 
         scope.$apply(); 
       }); 

      } 

     } 
    }; 

}); 

प्रयोग उदाहरण # 1 - इस मानता है कि आपके मोडल दिखाना चाहते हैं - आप जोड़ सकते एनजी-अगर एक शर्त के रूप

<div modal-show class="modal fade"> ...bootstrap modal... </div> 

प्रयोग उदाहरण # 2 - यह एक कोणीय अभिव्यक्ति मोडल में उपयोग करता है -visible विशेषता

<div modal-show modal-visible="showDialog" class="modal fade"> ...bootstrap modal... </div> 

एक और उदाहरण - नियंत्रक बातचीत डेमो के लिए, आप अपने नियंत्रक को कुछ इस तरह जोड़ सकता है और यह 2 सेकंड के बाद मॉडल दिखाने के लिए और फिर 5 secon के बाद छिपा दिया जाएगा डी एस।

$scope.showDialog = false; 
$timeout(function() { $scope.showDialog = true; }, 2000) 
$timeout(function() { $scope.showDialog = false; }, 5000) 

मुझे यह देखने में उत्सुकता है कि लोग किस समाधान के साथ आते हैं। चीयर्स!