Winkelmaterial - Bodenplatte

Das $mdBottomSheet, ein Angular Service, wird zum Öffnen eines unteren Blattes über der Anwendung verwendet und bietet eine einfache Versprechen-API.

Methode & Beschreibung

$mdBottomSheet.show(options);

Zeigen Sie ein unteres Blatt mit den angegebenen Optionen an.

SN	Parameter & Beschreibung
1	* options Ein Optionsobjekt mit den folgenden Eigenschaften: templateUrl - {string=}- Die URL einer HTML-Vorlagendatei, die als Inhalt des unteren Blattes verwendet wird. Einschränkungen: Die Vorlage muss ein äußeres md-bottom-sheet-Element haben. template - {string=} - Wie templateUrl, außer dass dies eine tatsächliche Vorlagenzeichenfolge ist. scope - {object=}- Der Bereich, mit dem die Vorlage / der Controller verknüpft werden soll. Wenn keine angegeben ist, wird ein neuer untergeordneter Bereich erstellt. Dieser Bereich wird zerstört, wenn das untere Blatt entfernt wird, es sei denn ,erveScope ist auf true gesetzt. preserveScope - {boolean=}- Es wird festgelegt, ob der Bereich beibehalten werden soll, wenn das Element entfernt wird. Standardmäßig ist es falsch. controller - {string=} - Der Controller, der diesem unteren Blatt zugeordnet werden soll. locals - {string=}- Ein Objekt, das Schlüssel / Wert-Paare enthält. Die Tasten werden als Namen von Werten verwendet, die in die Steuerung eingefügt werden sollen. Zum Beispiel,locals: {three: 3} injiziert drei mit dem Wert 3 in den Controller. clickOutsideToClose - {boolean=}- Es bestimmt, ob der Benutzer außerhalb des unteren Blattes klicken kann, um es zu schließen. Standardmäßig ist es wahr. EscapeToClose - {boolean =}: Legt fest, ob der Benutzer die Esc-Taste drücken kann, um das untere Blatt zu schließen. Standardmäßig ist es wahr. resolve - {object=} - Ähnlich wie bei Einheimischen, außer dass Versprechen als Werte verwendet werden und das untere Blatt erst geöffnet wird, wenn die Versprechen gelöst sind. controllerAs - {string =}: Ein Alias, dem der Controller im Bereich zugewiesen werden soll. parent - {element=}- Das Element, an das das untere Blatt angehängt werden soll. Das übergeordnete Element kann eine Funktion, eine Zeichenfolge, ein Objekt oder eine Null sein. Standardmäßig wird an den Hauptteil des Stammelements (oder des Stammelements) der Anwendung angehängt. zB angle.element (document.getElementById ('content')) oder "#content". disableParentScroll - {boolean=}- Gibt an, ob das Scrollen deaktiviert werden soll, während das untere Blatt geöffnet ist. Standard wahr.

Sr.Nr.	Rückgabe & Beschreibung
1	promise Ein Versprechen, das mit $ mdBottomSheet.hide () gelöst oder mit $ mdBottomSheet.cancel () abgelehnt werden kann.

Beispiel

Das folgende Beispiel zeigt die Verwendung von $mdBottomSheet Service und auch die Verwendung von Bodenplatte.

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>

Ergebnis

Überprüfen Sie das Ergebnis.