วัสดุเชิงมุม - แผ่นด้านล่าง

$mdBottomSheetซึ่งเป็น Angular Service ใช้เพื่อเปิดแผ่นงานด้านล่างบนแอปพลิเคชันและจัดเตรียม API สัญญาแบบง่ายๆ

วิธีการและคำอธิบาย

$mdBottomSheet.show(options);

แสดงแผ่นงานด้านล่างพร้อมตัวเลือกที่ระบุ

SN	พารามิเตอร์และคำอธิบาย
1	* options อ็อบเจ็กต์อ็อพชันที่มีคุณสมบัติดังต่อไปนี้ - templateUrl - {string=}- URL ของไฟล์เทมเพลต html ที่จะใช้เป็นเนื้อหาของแผ่นงานด้านล่าง ข้อ จำกัด : เทมเพลตต้องมีองค์ประกอบ md-bottom-sheet ด้านนอก template - {string=} - เหมือนกับ templateUrl ยกเว้นว่านี่คือสตริงเทมเพลตจริง scope - {object=}- ขอบเขตในการเชื่อมโยงแม่แบบ / ตัวควบคุมไป หากไม่มีการระบุไว้ระบบจะสร้างขอบเขตลูกใหม่ ขอบเขตนี้จะถูกทำลายเมื่อแผ่นด้านล่างถูกลบออกเว้นแต่ว่า preserveScope จะตั้งค่าเป็นจริง preserveScope - {boolean=}- กำหนดว่าจะรักษาขอบเขตหรือไม่เมื่อองค์ประกอบถูกลบออก โดยค่าเริ่มต้นจะเป็นเท็จ controller - {string=} - ตัวควบคุมที่จะเชื่อมโยงกับแผ่นงานด้านล่างนี้ locals - {string=}- วัตถุที่มีคู่คีย์ / ค่า คีย์จะถูกใช้เป็นชื่อของค่าที่จะฉีดเข้าไปในคอนโทรลเลอร์ ตัวอย่างเช่น,locals: {three: 3} จะฉีดสามตัวลงในตัวควบคุมด้วยค่า 3 clickOutsideToClose - {boolean=}- กำหนดว่าผู้ใช้สามารถคลิกนอกแผ่นงานด้านล่างเพื่อปิดได้หรือไม่ โดยค่าเริ่มต้นมันเป็นจริง escapeToClose - {boolean =}: กำหนดว่าผู้ใช้สามารถกด escape เพื่อปิดแผ่นงานด้านล่างได้หรือไม่ โดยค่าเริ่มต้นมันเป็นจริง resolve - {object=} - คล้ายกับคนในท้องถิ่นยกเว้นว่าจะใช้คำสัญญาเป็นค่านิยมและแผ่นงานด้านล่างจะไม่เปิดจนกว่าคำสัญญาจะคลี่คลาย controllerAs - {string =}: นามแฝงเพื่อกำหนดคอนโทรลเลอร์ให้กับขอบเขต parent - {element=}- องค์ประกอบที่จะต่อท้ายแผ่นงานด้านล่าง พาเรนต์อาจเป็นฟังก์ชันสตริงอ็อบเจ็กต์หรือโมฆะ ค่าดีฟอลต์คือการต่อท้ายเนื้อหาขององค์ประกอบรูท (หรือองค์ประกอบรูท) ของแอ็พพลิเคชัน เช่น angular.element (document.getElementById ('content')) หรือ "#content" disableParentScroll - {boolean=}- ปิดใช้งานการเลื่อนในขณะที่แผ่นงานด้านล่างเปิดอยู่หรือไม่ ค่าเริ่มต้นจริง

ซีเนียร์ No	ผลตอบแทนและคำอธิบาย
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>

ผลลัพธ์

ตรวจสอบผลลัพธ์