Angular Material - 底部選單

$mdBottomSheet 是一個 Angular 服務，用於在應用程式上開啟底部選單，並提供簡單的 Promise API。

序號

方法和描述

$mdBottomSheet.show(options);

使用指定的選項顯示底部選單。

序號

引數和描述

* options

一個選項物件，包含以下屬性：

templateUrl - {string=} - 將用作底部選單內容的 html 模板檔案的 url。限制：模板必須具有外部 md-bottom-sheet 元素。
template - {string=} - 與 templateUrl 相同，只是這是一個實際的模板字串。
scope - {object=} - 將模板/控制器連結到的作用域。如果沒有指定，它將建立一個新的子作用域。除非將 preserveScope 設定為 true，否則當底部選單移除時，此作用域將被銷燬。
preserveScope - {boolean=} - 它決定在移除元素時是否保留作用域。預設情況下為 false。
controller - {string=} - 與此底部選單關聯的控制器。
locals - {string=} - 包含鍵/值對的物件。這些鍵將用作要注入控制器的值的名稱。例如，locals: {three: 3} 將把值為 3 的 three 注入控制器。
clickOutsideToClose - {boolean=} - 它決定使用者是否可以點選底部選單外部來關閉它。預設情況下為 true。
escapeToClose - {boolean=} - 它決定使用者是否可以按 Esc 鍵來關閉底部選單。預設情況下為 true。
resolve - {object=} - 與 locals 類似，但它接受 Promise 作為值，並且只有在 Promise 解析後才會開啟底部選單。
controllerAs - {string=} - 用於在作用域上為控制器分配別名。
parent - {element=} - 將底部選單附加到的元素。父元素可以是函式、字串、物件或 null。預設為附加到應用程式的根元素（或根元素）的主體。例如 angular.element(document.getElementById('content')) 或 "#content"。
disableParentScroll - {boolean=} - 是否在底部選單開啟時停用滾動。預設為 true。

序號	返回值和描述
1	promise 可以使用 $mdBottomSheet.hide() 解析或使用 $mdBottomSheet.cancel() 拒絕的 Promise。

示例

以下示例顯示了 $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>

結果

驗證結果。

列印頁面