कोणीय सामग्री - नीचे की शीट

$mdBottomSheetएक कोणीय सेवा, का उपयोग आवेदन पर एक निचली शीट खोलने के लिए किया जाता है और एक सरल वादा एपीआई प्रदान करता है।

एस.एन.

विधि और विवरण

$mdBottomSheet.show(options);

निर्दिष्ट विकल्पों के साथ एक निचली शीट दिखाएं।

एस.एन.	पैरामीटर और विवरण
1	* options एक विकल्प वस्तु, निम्नलिखित गुणों के साथ - templateUrl - {string=}- एक html टेम्पलेट फ़ाइल का url जिसे नीचे शीट की सामग्री के रूप में उपयोग किया जाएगा। प्रतिबंध: टेम्पलेट में बाहरी md-bottom-sheet तत्व होना चाहिए। template - {string=} - टेम्पलेट के रूप में ही, यह एक वास्तविक टेम्पलेट स्ट्रिंग को छोड़कर है। scope - {object=}- टेम्प्लेट / कंट्रोलर को लिंक करने की गुंजाइश। यदि कोई भी निर्दिष्ट नहीं है, तो यह एक नया चाइल्ड स्कोप बनाएगा। जब तक संरक्षित शीट को सही पर सेट नहीं किया जाता है तब तक नीचे की शीट को हटा दिए जाने पर यह गुंजाइश नष्ट हो जाएगी। preserveScope - {boolean=}- यह तय करता है कि तत्व हटाए जाने पर गुंजाइश को संरक्षित करना है या नहीं। डिफ़ॉल्ट रूप से, यह गलत है। controller - {string=} - नियंत्रक इस नीचे शीट के साथ संबद्ध करने के लिए। locals - {string=}- कुंजी / मान जोड़े वाली एक वस्तु। नियंत्रक में इंजेक्ट करने के लिए मान का नाम मान के रूप में उपयोग किया जाएगा। उदाहरण के लिए,locals: {three: 3} 3 के मूल्य के साथ नियंत्रक में तीन इंजेक्षन करेगा। clickOutsideToClose - {boolean=}- यह तय करता है कि उपयोगकर्ता इसे बंद करने के लिए नीचे की शीट के बाहर क्लिक कर सकता है या नहीं। डिफ़ॉल्ट रूप से, यह सच है। esToClose - {बूलियन =}: यह निर्धारित करता है कि उपयोगकर्ता नीचे की शीट को बंद करने के लिए भागने को दबा सकता है या नहीं। डिफ़ॉल्ट रूप से, यह सच है। resolve - {object=} - स्थानीय लोगों के समान, इसके अलावा यह वादों को मूल्यों के रूप में लेता है और नीचे की शीट तब तक नहीं खुलेगी जब तक कि वादे हल नहीं हो जाते। कंट्रोलर - {string =}: कंट्रोलर को स्कोप पर असाइन करने के लिए एक उपनाम। parent - {element=}- नीचे शीट को जोड़ने के लिए तत्व। अभिभावक एक फंक्शन, स्ट्रिंग, ऑब्जेक्ट या नल हो सकता है। आवेदन के मूल तत्व (या मूल तत्व) के शरीर के लिए अपील करने के लिए चूक। उदा। angular.element (document.getElementById ('सामग्री')) या "# कॉन्टेंट"। disableParentScroll - {boolean=}- क्या स्क्रॉलिंग को अक्षम करना है जबकि नीचे की शीट खुली है। डिफ़ॉल्ट सत्य।

अनु क्रमांक	रिटर्न और विवरण
1	promise एक वादा जिसे $ mdBottomSheet.hide () के साथ हल किया जा सकता है या $ mdBottomSheet.cancel () के साथ खारिज कर दिया जा सकता है।

उदाहरण

निम्नलिखित उदाहरण के उपयोग को दर्शाता है $mdBottomSheet सेवा और नीचे शीट का उपयोग भी।

am_bottomsheet.htm

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
	  
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('bottomSheetController', bottomSheetController);

         function bottomSheetController ($scope, $mdBottomSheet) {
            $scope.openBottomSheet = function() {
               $mdBottomSheet.show ({
                  template: '<md-bottom-sheet>Learn <b>Angular Material</b> @ TutorialsPoint.com!</md-bottom-sheet>'
               });
            };
         }  
      </script>      
   </head>
   
   <body ng-app = "firstApplication">
      <div ng-controller = "bottomSheetController as ctrl" layout = "column">
         <md-content class = "md-padding">
            <form ng-submit = "$event.preventDefault()">
               <md-button class = "md-raised md-primary" ng-click = "openBottomSheet()">
                  Open Bottom Sheet!
               </md-button>
            </form>
         </md-content>
      </div>
   </body>
</html>

परिणाम

परिणाम सत्यापित करें।