Materiał kątowy - arkusz dolny

Plik $mdBottomSheet, usługa Angular, służy do otwierania dolnego arkusza aplikacji i zapewnia prosty interfejs API obietnicy.

Metoda i opis

$mdBottomSheet.show(options);

Pokaż dolny arkusz z określonymi opcjami.

SN	Parametr i opis
1	* options Obiekt opcji z następującymi właściwościami - templateUrl - {string=}- Adres URL pliku szablonu html, który będzie używany jako zawartość dolnego arkusza. Ograniczenia: szablon musi mieć zewnętrzny element md-bottom-sheet. template - {string=} - To samo, co templateUrl, ale jest to rzeczywisty ciąg szablonu. scope - {object=}- Zakres, z którym ma zostać powiązany szablon / kontroler. Jeśli żaden nie zostanie określony, utworzy nowy zakres podrzędny. Ten zakres zostanie zniszczony po usunięciu dolnego arkusza, chyba że preserveScope ma wartość true. preserveScope - {boolean=}- Dyktuje, czy zachować zakres, gdy element zostanie usunięty. Domyślnie jest to fałsz. controller - {string=} - Kontroler, który ma zostać powiązany z tym dolnym arkuszem. locals - {string=}- Obiekt zawierający pary klucz / wartość. Klucze będą używane jako nazwy wartości do wstrzyknięcia do kontrolera. Na przykład,locals: {three: 3} wstrzyknie do kontrolera trzy o wartości 3. clickOutsideToClose - {boolean=}- Określa, czy użytkownik może kliknąć poza dolnym arkuszem, aby go zamknąć. Domyślnie jest to prawda. escapeToClose - {boolean =}: Określa, czy użytkownik może nacisnąć klawisz Escape, aby zamknąć dolny arkusz. Domyślnie jest to prawda. resolve - {object=} - Podobnie jak w przypadku lokalnych, z tym wyjątkiem, że przyjmuje obietnice jako wartości, a dolny arkusz nie otworzy się, dopóki obietnice nie zostaną rozwiązane. controllerAs - {string =}: alias, do którego ma zostać przypisany kontroler w zakresie. parent - {element=}- element, do którego ma zostać dołączony dolny arkusz. Rodzicem może być funkcja, ciąg znaków, obiekt lub wartość null. Domyślnie dołącza się do treści elementu głównego (lub elementu głównego) aplikacji. np. angular.element (document.getElementById ('content')) lub "#content". disableParentScroll - {boolean=}- Czy wyłączyć przewijanie, gdy dolny arkusz jest otwarty. Domyślnie prawda.

Sr.No	Zwroty i opis
1	promise Obietnica, którą można rozwiązać za pomocą $ mdBottomSheet.hide () lub odrzucić za pomocą $ mdBottomSheet.cancel ().

Przykład

Poniższy przykład pokazuje użycie $mdBottomSheet serwis, a także użycie dolnej blachy.

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>

Wynik

Sprawdź wynik.