Material angular: hoja inferior

los $mdBottomSheet, un servicio angular, se utiliza para abrir una hoja inferior sobre la aplicación y proporciona una API de promesa simple.

SN Método y descripción
1

$mdBottomSheet.show(options);

Muestre una hoja inferior con las opciones especificadas.

SN Descripción de parámetros
1

* options

Un objeto de opciones, con las siguientes propiedades:

  • templateUrl - {string=}- La URL de un archivo de plantilla html que se utilizará como contenido de la hoja inferior. Restricciones: la plantilla debe tener un elemento externo md-bottom-sheet.

  • template - {string=} - Igual que templateUrl, excepto que se trata de una cadena de plantilla real.

  • scope - {object=}- El alcance al que vincular la plantilla / controlador. Si no se especifica ninguno, se creará un nuevo ámbito secundario. Este alcance se destruirá cuando se elimine la hoja inferior, a menos que preserveScope se establezca en verdadero.

  • preserveScope - {boolean=}- Determina si se debe conservar el alcance cuando se elimina el elemento. Por defecto, es falso.

  • controller - {string=} - El controlador a asociar con esta hoja inferior.

  • locals - {string=}- Un objeto que contiene pares clave / valor. Las claves se utilizarán como nombres de valores para inyectar en el controlador. Por ejemplo,locals: {three: 3} inyectará tres en el controlador con el valor de 3.

  • clickOutsideToClose - {boolean=}- Determina si el usuario puede hacer clic fuera de la hoja inferior para cerrarla. Por defecto, es cierto.

    • escapeToClose - {boolean =}: dicta si el usuario puede presionar escape para cerrar la hoja inferior. Por defecto, es cierto.

  • resolve - {object=} - Similar a los locales, excepto que toma promesas como valores y la hoja inferior no se abrirá hasta que las promesas se resuelvan.

    • controllerAs - {string =}: un alias para asignar el controlador en el alcance.

  • parent - {element=}- El elemento al que agregar la hoja inferior. El padre puede ser una función, cadena, objeto o nulo. De forma predeterminada, se agrega al cuerpo del elemento raíz (o el elemento raíz) de la aplicación. por ejemplo, angular.element (document.getElementById ('contenido')) o "#content".

  • disableParentScroll - {boolean=}- Si se deshabilita el desplazamiento mientras la hoja inferior está abierta. Verdadero por defecto.
No Señor Devoluciones y descripción
1

promise

Una promesa que puede resolverse con $ mdBottomSheet.hide () o rechazarse con $ mdBottomSheet.cancel ().

Ejemplo

El siguiente ejemplo muestra el uso del $mdBottomSheet servicio y también el uso de sábana bajera.

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>

Resultado

Verifica el resultado.