Materiale angolare - Foglio inferiore

Il $mdBottomSheet, un servizio angolare, viene utilizzato per aprire un foglio inferiore sull'applicazione e fornisce una semplice API promessa.

SN Metodo e descrizione
1

$mdBottomSheet.show(options);

Mostra un foglio inferiore con le opzioni specificate.

SN Parametro e descrizione
1

* options

Un oggetto opzioni, con le seguenti proprietà:

  • templateUrl - {string=}- L'URL di un file modello html che verrà utilizzato come contenuto del foglio inferiore. Restrizioni: il modello deve avere un elemento esterno md-bottom-sheet.

  • template - {string=} - Uguale a templateUrl, tranne che si tratta di una stringa di modello effettiva.

  • scope - {object=}- L'ambito a cui collegare il modello / controller. Se nessuno è specificato, creerà un nuovo ambito figlio. Questo ambito verrà eliminato quando viene rimosso il foglio inferiore a meno che preservScope non sia impostato su true.

  • preserveScope - {boolean=}- Stabilisce se conservare l'ambito quando l'elemento viene rimosso. Per impostazione predefinita, è falso.

  • controller - {string=} - Il controller da associare a questo foglio inferiore.

  • locals - {string=}- Un oggetto contenente coppie chiave / valore. Le chiavi verranno utilizzate come nomi di valori da iniettare nel controller. Per esempio,locals: {three: 3} ne inietterà tre nel controller con il valore di 3.

  • clickOutsideToClose - {boolean=}- Determina se l'utente può fare clic all'esterno del foglio inferiore per chiuderlo. Per impostazione predefinita, è vero.

    • escapeToClose - {boolean =}: stabilisce se l'utente può premere Esc per chiudere il foglio inferiore. Per impostazione predefinita, è vero.

  • resolve - {object=} - Simile alla gente del posto, tranne per il fatto che prende le promesse come valori e il foglio inferiore non si aprirà fino a quando le promesse non saranno risolte.

    • controllerAs - {string =}: un alias a cui assegnare il controller nell'ambito.

  • parent - {element=}- L'elemento a cui aggiungere il foglio inferiore. Il genitore può essere una funzione, una stringa, un oggetto o un null. L'impostazione predefinita è l'aggiunta al corpo dell'elemento radice (o dell'elemento radice) dell'applicazione. ad esempio angular.element (document.getElementById ('content')) o "#content".

  • disableParentScroll - {boolean=}- Se disabilitare lo scorrimento mentre il foglio inferiore è aperto. Valore predefinito true.
Suor n Resi e descrizione
1

promise

Una promessa che può essere risolta con $ mdBottomSheet.hide () o rifiutata con $ mdBottomSheet.cancel ().

Esempio

L'esempio seguente mostra l'uso di $mdBottomSheet servizio e anche l'uso del lenzuolo di sotto.

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>

Risultato

Verifica il risultato.