Angular Material - Bottom Sheet

Angular Material - Bottom Sheet 从简单和简单的步骤学习角度材料从基本到高级概念，包括概述，环境设置，自动完成，底部工作表，按钮，卡片，复选框，芯片，联系芯片，内容，DatePicker，Dialogs，Divider ，Fab速拨，Fab工具栏，网格，图标，输入，布局，列表，菜单，菜单栏，进度条，单选按钮，选择，SideNav，滑块，Subheaders，刷卡，开关，选项卡，主题，敬酒，工具栏，工具提示，排版，虚拟重复，WhiteFrame。

$ mdBottomSheet ，一个Angular服务，用于在应用程序上打开一个底部工作表，并提供一个简单的promise API.

SN	方法&说明
1	$ mdBottomSheet.show(options); 显示带有指定选项的底部工作表.
SN	参数&说明
1	选项一个选项对象，具有以下属性 : templateUrl - {string =}* : html模板文件的url，将用作底部工作表的内容.限制:模板必须具有外部md-bottom-sheet元素. 模板 - {string =} : 与templateUrl相同，但这是一个实际的模板字符串. 范围 - {object =} : 将模板/控制器链接到的范围.如果未指定，则将创建新的子范围.除非将preserveScope设置为true，否则在删除底部工作表时将销毁此范围. preserveScope - {boolean =} &minus ;它决定了在删除元素时是否保留范围.默认情况下，它是错误的. 控制器 - {string =} : 与此底页相关联的控制器. 本地人 - {string =} : 包含键/值对的对象.键将用作注入控制器的值的名称.例如， locals:{three:3} 会向控制器注入三个值为3的值. clickOutsideToClose - {boolean =} : 它决定用户是否可以在底部工作表外单击以关闭它.默认情况下，它是真的. escapeToClose - {boolean =}: 它指示用户是否可以按escape来关闭底部工作表.默认情况下，这是真的. resolve - {object =} : 与本地人类似，不同之处在于它将承诺作为值，并且在承诺解决之前底部工作表将不会打开. controllerAs - {string =}: 要分配的别名控制器在范围内. parent - {element =} : 要添加底部工作表的元素.父级可以是函数，字符串，对象或null.默认为附加到应用程序的根元素(或根元素)的主体.例如angular.element(document.getElementById('content'))或"#content". disableParentScroll - {boolean =} &减去;是否在底部工作表打开时禁用滚动.默认为真.

方法&说明

$ mdBottomSheet.show(options);

显示带有指定选项的底部工作表.

参数&说明

*选项

一个选项对象，具有以下属性 :

templateUrl - {string =} : html模板文件的url，将用作底部工作表的内容.限制:模板必须具有外部md-bottom-sheet元素.
模板 - {string =} : 与templateUrl相同，但这是一个实际的模板字符串.
范围 - {object =} : 将模板/控制器链接到的范围.如果未指定，则将创建新的子范围.除非将preserveScope设置为true，否则在删除底部工作表时将销毁此范围.
preserveScope - {boolean =} &minus ;它决定了在删除元素时是否保留范围.默认情况下，它是错误的.
控制器 - {string =} : 与此底页相关联的控制器.
本地人 - {string =} : 包含键/值对的对象.键将用作注入控制器的值的名称.例如， locals:{three:3} 会向控制器注入三个值为3的值.
clickOutsideToClose - {boolean =} : 它决定用户是否可以在底部工作表外单击以关闭它.默认情况下，它是真的.

escapeToClose - {boolean =}:
它指示用户是否可以按escape来关闭底部工作表.默认情况下，这是真的.
resolve - {object =} : 与本地人类似，不同之处在于它将承诺作为值，并且在承诺解决之前底部工作表将不会打开.

controllerAs - {string =}:
要分配的别名控制器在范围内.
parent - {element =} : 要添加底部工作表的元素.父级可以是函数，字符串，对象或null.默认为附加到应用程序的根元素(或根元素)的主体.例如angular.element(document.getElementById('content'))或"#content".
disableParentScroll - {boolean =} &减去;是否在底部工作表打开时禁用滚动.默认为真.

Sr.No	返回&说明
1	承诺可以使用$ mdBottomSheet.hide()解决或使用$ mdBottomSheet.cancel()拒绝的承诺.

示例

以下示例显示了 $ mdBottomSheet 服务的使用以及底页的使用.

am_bottomsheet .htm

                                                        angular            .module('firstApplication', ['ngMaterial'])            .controller('bottomSheetController', bottomSheetController);         function bottomSheetController ($scope, $mdBottomSheet) {            $scope.openBottomSheet = function() {               $mdBottomSheet.show ({                  template: 'Learn Angular Material @ TutorialsPoint.com!'               });            };         }                                                                                   Open Bottom Sheet!

结果

验证结果.