HTML CSS JAVASCRIPT PYTHON PYTHON2 JAVA C C++ C# SQL Excel Linux AI BOOTSTRAP PHP 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ
❮ 上一节 下一节 ❯

Angular Material - 底部工作表

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

S.N 方法 & 描述
1

$mdBottomSheet.show(options);

显示具有指定选项的底部工作表。

S.N 参数和描述
1

* options

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

  • templateUrl - {string=} − 将用作底部工作表内容的 html 模板文件的 URL。 限制:模板必须有一个外部 md-bottom-sheet 元素。

  • template - {string=} − 与 templateUrl 相同，只不过这是一个实际的模板字符串。

  • scope - {object=} − 模板/控制器链接到的范围。 如果未指定，它将创建一个新的子作用域。 除非将 keepScope 设置为 true，否则当底部工作表被删除时，此范围将被销毁。

  • preserveScope - {boolean=} − 它指示删除元素时是否保留范围。 默认情况下为 false。

  • controller - {string=} − 与此底部工作表关联的控制器。

  • locals - {string=} − 包含键/值对的对象。 键将用作要注入控制器的值的名称。 例如，locals: {two: 3} 会将 3 注入控制器，值为 3。

  • clickOutsideToClose - {boolean=} − 它指示用户是否可以单击底部工作表外部以将其关闭。 默认情况下，它是 true。

  • escapeToClose - {boolean=} − 它指示用户是否可以按 Esc 键关闭底部工作表。 默认情况下，它是 true。

  • resolve - {object=} − 与本地类似，不同之处在于它将 Promise 作为值，并且在 Promise 解析之前底部工作表不会打开。

  • controllerAs - {string=} − 在作用域上分配控制器的别名。

  • parent - {element=} − 要附加底部工作表的元素。 父级可以是函数、字符串、对象或 null。 默认附加到应用程序的根元素（或根元素）的主体。 例如 angular.element(document.getElementById('content')) 或"#content"。

  • disableParentScroll - {boolean=} − 底部工作表打开时是否禁用滚动。 默认 true。

Sr.No 返回值 & 描述
1

promise

可以使用 $mdBottomSheet.hide() 解决或使用 $mdBottomSheet.cancel() 拒绝的承诺。

示例

以下示例展示了 $mdBottomSheet 服务的使用以及底部工作表的使用。

am_bottomsheet.html

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://www.w3ccoo.com/lib/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://cdn.staticfile.org/angular.js/1.4.8/angular.min.js"></script>
      <script src = "https://cdn.staticfile.org/angular.js/1.4.8/angular-animate.min.js"></script>
      <script src = "https://cdn.staticfile.org/angular.js/1.4.8/angular-aria.min.js"></script>
      <script src = "https://cdn.staticfile.org/angular.js/1.4.8/angular-messages.min.js"></script>
      <script src = "https://www.w3ccoo.com/lib/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> @ www.w3ccoo.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>

结果

验证结果。

❮ 上一节 下一节 ❯