角度材料底部表單不會關閉點擊

我有角度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>

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(); 
}

}）

來源

2017-09-25 user5854648

在取消按鈕的模板中，您需要調用關閉底部表格的函數。

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

這裏是材料文件

Example

而且，這裏的樣本是plunker - >Example 2

來源

2017-09-25 23:30:35

雖然你的答案在理論上的作品，它不會在我的示例工作。當我添加ng-click =「closeBottomSheet（）」時，它不會關閉底部工作表。我添加了它來取消，它在我的CodePen演示中沒有做任何事情。 – user5854648

您必須刪除在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>

來源

2017-09-26 06:36:27 Lakmi

角度材料底部表單不會關閉點擊

回答

相關問題