角形材料底页在单击时不会关闭

Question

I am having trouble with Angular Materia's Bottom Sheet. 我在Angular Materia的底表方面遇到麻烦。 I can get it to fire open but I can't get the menu to close when a button is clicked. 我可以将其打开，但是单击按钮时无法关闭菜单。 It will close when clicked elsewhere, but not if one of the buttons in the bottom sheet is selected. 单击其他位置时，它将关闭，但是如果选择了底部表单中的按钮之一，则不会关闭。 There is a working Code Pen demo for demonstration. 有一个工作的Code Pen演示程序进行演示。 All help is appreciated. 感谢所有帮助。

Code Pen: https://codepen.io/anon/pen/oGBGgJ 密码笔： https ： //codepen.io/anon/pen/oGBGgJ

HTML HTML

<body layout="row" ng-controller="BottomSheetController">
  <div layout="column" layout-fill flex class="set-page-background" ng-controller="BottomSheetController">

<md-toolbar class="md-tall contact-tall">
  <div layout="column" class="md-toolbar-tools-bottom inset" layout-fill layout-align="center start">

    <div layout="row" layout-align="start center">

      <!-- BOTTOM SHEET BUTTON -->
      <div flex="10" ng-click="openBottomSheet()">
        <md-button>Open Sheet</md-button>
     </div>
    </div>
</md-toolbar>
</div>
</body>

JS JS

var app = angular.module('StarterApp', ['ngMaterial', 'ngMdIcons']);

app.controller('BottomSheetController', function($scope, $mdBottomSheet) {
$scope.openBottomSheet = function() {
  $mdBottomSheet.show({
    template: '<md-bottom-sheet class="btm-list">' +
    '<md-button class="btm-sheet-btn">Add</md-button>'  +
    '<md-button class="btm-sheet-btn">Delete</md-button>'  +
    '<md-button class="btm-sheet-btn">Append</md-button>'  +
    '<md-button class="btm-sheet-btn">Show</md-button>'  +
    '<md-button class="btm-sheet-btn cancel-btn">Cancel</md-button>'  +

    '</md-bottom-sheet>'
  })
  .then(function() {
    console.log('You clicked the button to close the bottom sheet!');
  })

  // Fires when the cancel() method is used
  .catch(function() {
    console.log('You hit escape or clicked the backdrop to close.');
  });
}
$scope.closeBottomSheet = function($scope, $mdBottomSheet) {
  $mdBottomSheet.hide();
}

}) }）

Answer 1

You have to remove closeBottomSheet() parameters in js file. 您必须在js文件中删除closeBottomSheet()参数。 this is sample code you can refer 这是示例代码，您可以参考

 $scope.closeBottomSheet = function() {

        $mdBottomSheet.hide();
      }

 var app = angular.module('app', ['ngMaterial']); app.controller('MyController', function($scope, $mdBottomSheet) { $scope.openBottomSheet = function() { $mdBottomSheet.show({ controller:'MyController', template: '<md-bottom-sheet>' + 'Hello! <md-button ng-click="closeBottomSheet()">Close</md-button>' + '</md-bottom-sheet>' }) // Fires when the hide() method is used .then(function() { console.log('You clicked the button to close the bottom sheet!'); }) // Fires when the cancel() method is used .catch(function() { console.log('You hit escape or clicked the backdrop to close.'); }); }; $scope.closeBottomSheet = function() { $mdBottomSheet.hide(); } });

 <html lang="en" > <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Angular Material style sheet --> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css"> </head> <body ng-app="app" ng-cloak> <div ng-controller="MyController"> <md-button ng-click="openBottomSheet()"> Open a Bottom Sheet! </md-button> </div> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script> </body> </html>

Answer 2

In the template for the cancel button you need to call the function wich close the bottomsheet. 在“取消”按钮的模板中，您需要调用函数，以关闭底表。

'<md-button class="btm-sheet-btn cancel-btn" ng-click="closeBottomSheet()" >Cancel</md-button>'

Here is the sample on the material documentation 这是材料文档上的样本

Example 例

Also here is a plunker -> Example 2 这也是一个punker-> 示例2

角形材料底页在单击时不会关闭

问题描述

2 个解决方案

解决方案1
1 2017-09-26 06:36:27

解决方案2
0 2017-09-25 23:30:35

角形材料底页在单击时不会关闭

问题描述

2 个解决方案

解决方案1 1 2017-09-26 06:36:27

解决方案2 0 2017-09-25 23:30:35

解决方案1
1 2017-09-26 06:36:27

解决方案2
0 2017-09-25 23:30:35