#Bottom sheets can be displayed by clicking one of the buttons below.

##Leave the template html aside the directive's javascript

<link rel="stylesheet" href="ng_bottomSheet.css">
<script type="text/javascript" src="bottomSheet.js"></script>

##Add dependencies on the ion-BottomSheet AngularJS module: angular.module('myApp', ['ion-BottomSheet']);

###You can now use the directive: $bottomSheet.show({
buttons: [
[
{btText:"1",btClass:"",btId:"1"},
{btText:"2",btClass:"",btId:"2"},
{btText:"3",btClass:"",btId:"3"}
],
[
{btText:"4",btClass:"",btId:"4"},
{btText:"5",btClass:"",btId:"5"},
{btText:"6",btClass:"",btId:"6"}
],
[
{btText:"7",btClass:"",btId:"7"},
{btText:"8",btClass:"",btId:"8"},
{btText:"9",btClass:"",btId:"9"}
],
[
{btText:"",btClass:"icon ion-chevron-down",btId:"hide",hideOnClick:true}, //hide the bottomSheet when click
{btText:"0",btClass:"",btId:"0"},
{btText:"",btClass:"icon ion-backspace",btId:"back"}
]
],
titleText: '',
buttonClicked: function(button,scope) {
if(button.btId=='1'){
alert('you click 1,will cancel');
scope.cancel()
return;
}
}
});

The property* "buttons" is an *2D array. You can use 'btClass' customize the button style