Matériau angulaire - Feuille inférieure

le $mdBottomSheet, un service angulaire, est utilisé pour ouvrir une feuille inférieure sur l'application et fournit une API de promesse simple.

SN Méthode et description
1

$mdBottomSheet.show(options);

Afficher une feuille inférieure avec les options spécifiées.

SN Paramètre et description
1

* options

Un objet d'options, avec les propriétés suivantes -

  • templateUrl - {string=}- L'url d'un fichier modèle html qui sera utilisé comme contenu de la feuille du bas. Restrictions: le modèle doit avoir un élément extérieur md-bottom-sheet.

  • template - {string=} - Identique à templateUrl, sauf qu'il s'agit d'une chaîne de modèle réelle.

  • scope - {object=}- La portée à laquelle lier le modèle / contrôleur. Si aucun n'est spécifié, il créera une nouvelle portée enfant. Cette étendue sera détruite lorsque la feuille du bas est supprimée, sauf si PreserveScope est défini sur true.

  • preserveScope - {boolean=}- Il dicte s'il faut conserver la portée lorsque l'élément est supprimé. Par défaut, il est faux.

  • controller - {string=} - Le contrôleur à associer à ce bas de page.

  • locals - {string=}- Un objet contenant des paires clé / valeur. Les clés seront utilisées comme noms de valeurs à injecter dans le contrôleur. Par exemple,locals: {three: 3} injectera trois dans le contrôleur avec la valeur de 3.

  • clickOutsideToClose - {boolean=}- Il dicte si l'utilisateur peut cliquer en dehors de la feuille inférieure pour la fermer. Par défaut, c'est vrai.

    • escapeToClose - {boolean =}: il détermine si l'utilisateur peut appuyer sur échapper pour fermer la feuille du bas. Par défaut, c'est vrai.

  • resolve - {object=} - Similaire aux locaux, sauf que cela prend des promesses comme valeurs et que la feuille du bas ne s'ouvrira pas tant que les promesses ne seront pas résolues.

    • controllerAs - {string =}: un alias auquel attribuer le contrôleur sur la portée.

  • parent - {element=}- L'élément auquel ajouter la feuille du bas. Le parent peut être une fonction, une chaîne, un objet ou une valeur nulle. Par défaut, il ajoute au corps de l'élément racine (ou de l'élément racine) de l'application. par exemple angular.element (document.getElementById ('content')) ou "#content".

  • disableParentScroll - {boolean=}- S'il faut désactiver le défilement lorsque la feuille du bas est ouverte. Valeur par défaut true.
Sr. Non Retours et description
1

promise

Une promesse qui peut être résolue avec $ mdBottomSheet.hide () ou rejetée avec $ mdBottomSheet.cancel ().

Exemple

L'exemple suivant montre l'utilisation du $mdBottomSheet service et aussi l'utilisation de la feuille de fond.

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>

Résultat

Vérifiez le résultat.