Question

我在使用Angular Materia的底板时遇到了麻烦。我可以将它打开，但是当点击按钮时我无法关闭菜单。单击其他位置时将关闭，但如果选择了底部工作表中的其中一个按钮，则不会关闭。有一个工作的Code Pen演示用于演示。感谢所有帮助。

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

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

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

您必须删除js文件中的closeBottomSheet()个参数。这是您可以参考的示例代码

 $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

在取消按钮的模板中，您需要调用关闭底部表格的功能。

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

以下是材料文档中的示例

Example

这里还有一个plunker - ＆gt; Example 2

Angular Material Bottom Sheet不会在点击时关闭

2 个答案: