can i open 'mdbottomsheet ' over another 'mdbottomsheet ' in Angularjs Material?

Question

I'm beginner in AngularJs Material, I want to open a 'mdbottomsheet' and put a button inside this sheet, when click button, open another 'mdbottomsheet' over, without closing the first 'mdbottomsheet'.

There is HTML code:

<div ng-controller="MyController">
  <md-button ng-click="openBottomSheet()">
     Open a Bottom Sheet!
  </md-button>
</div>

There Js:

var app = angular.module('app', ['ngMaterial']);
app.controller('MyController', function($scope, $mdBottomSheet) {
  $scope.openBottomSheet = function() {
    $mdBottomSheet.show({
    controller: 'BottomSheet',
    template: '<md-bottom-sheet>Hello!
             <md-button ng-click="openSecondBottomSheet()">
                Open Second Bottom Sheet!
             </md-button></md-bottom-sheet>'
  });
 };
});

and in 'BottomSheet' controller:

var app = angular.module('app', ['ngMaterial']);
app.controller('BottomSheet', function($scope, $mdBottomSheet) {
  $scope.openSecondBottomSheet = function() {
    $mdBottomSheet.show({
    controller: 'SecondBottomSheet',
    template: '<md-bottom-sheet>Hello!</md-bottom-sheet>'
  });
 };
});

This is my codes, it works but when 'SecondBottomSheet' opened, first 'BottomSheet' closed! i want to open 'SecondBottomSheet' over the first 'BottomSheet'!

Answer 1

The $mdBottomSheet.show() returns a promise which can be used to check if the bottom sheet has closed. You can emulate the same by using the promise to close the first bottom sheet on click of your button and open another bottom sheet. When the second bottom sheet closes, you can again open your first bottom sheet.