AngularMaterial-ボトムシート

ザ・ $mdBottomSheetAngular Serviceは、アプリケーションのボトムシートを開くために使用され、単純なPromiseAPIを提供します。

方法と説明

$mdBottomSheet.show(options);

指定されたオプションで下のシートを表示します。

SN	パラメータと説明
1	* 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で3をコントローラーに注入します。 clickOutsideToClose - {boolean=}−ユーザーが下部シートの外側をクリックして閉じることができるかどうかを指定します。デフォルトでは、これはtrueです。 escapeToClose- {boolean =}：ユーザーがEscキーを押して下部のシートを閉じることができるかどうかを指定します。デフォルトでは、これはtrueです。 resolve - {object=} −ローカルと同様ですが、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>

結果

結果を確認します。