角度のある材料の底面シートは閉じないでください。

角膜の下面シートに問題があります。私はそれを開いて火を得ることができますが、ボタンをクリックするとメニューを閉じることができません。一番下のシートのボタンの1つが選択されていない場合は、他の場所でクリックすると閉じます。デモンストレーションのための実用的なコードペンデモがあります。すべての助けに感謝します。角度のある材料の底面シートは閉じないでください。

コードペン：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

角度のある材料の底面シートは閉じないでください。

答えて

関連する問題