Bahan Sudut - Lembaran Bawah

Itu $mdBottomSheet, Layanan Angular, digunakan untuk membuka lembar bawah di atas aplikasi dan menyediakan API janji sederhana.

SN Metode & Deskripsi
1

$mdBottomSheet.show(options);

Perlihatkan lembar bawah dengan opsi yang ditentukan.

SN Parameter & Deskripsi
1

* options

Objek opsi, dengan properti berikut -

  • templateUrl - {string=}- Url dari file template html yang akan digunakan sebagai konten lembar terbawah. Batasan: template harus memiliki elemen md-bottom-sheet luar.

  • template - {string=} - Sama seperti templateUrl, kecuali ini adalah string template sebenarnya.

  • scope - {object=}- Ruang lingkup untuk menghubungkan template / pengontrol. Jika tidak ada yang ditentukan, itu akan membuat cakupan anak baru. Cakupan ini akan dihancurkan ketika sheet bagian bawah dihapus kecuali preservScope disetel ke true.

  • preserveScope - {boolean=}- Ini menentukan apakah akan mempertahankan ruang lingkup saat elemen dihapus. Secara default, ini salah.

  • controller - {string=} - Pengontrol yang akan diasosiasikan dengan lembaran bawah ini.

  • locals - {string=}- Objek yang berisi pasangan kunci / nilai. Kunci akan digunakan sebagai nama nilai untuk dimasukkan ke dalam pengontrol. Sebagai contoh,locals: {three: 3} akan menyuntikkan tiga ke dalam pengontrol dengan nilai 3.

  • clickOutsideToClose - {boolean=}- Ini menentukan apakah pengguna dapat mengklik di luar lembar bawah untuk menutupnya. Secara default, ini benar.

  • escapeToClose - {boolean =}: Ini menentukan apakah pengguna dapat menekan escape untuk menutup sheet bawah. Secara default, ini benar.

  • resolve - {object=} - Mirip dengan penduduk setempat, hanya saja menerima janji sebagai nilai dan lembaran bawah tidak akan terbuka sampai janji terselesaikan.

  • controllerAs - {string =}: Alias ​​untuk menetapkan controller pada cakupan.

  • parent - {element=}- Elemen untuk menambahkan lembar bawah. Induk dapat berupa fungsi, string, objek, atau null. Secara default menambahkan ke badan elemen root (atau elemen root) aplikasi. misalnya angular.element (document.getElementById ('content')) atau "#content".

  • disableParentScroll - {boolean=}- Apakah akan menonaktifkan pengguliran saat lembaran bawah terbuka. Default benar.

Sr Tidak Pengembalian & Deskripsi
1

promise

Janji yang bisa diselesaikan dengan $ mdBottomSheet.hide () atau ditolak dengan $ mdBottomSheet.cancel ().

Contoh

Contoh berikut menunjukkan penggunaan file $mdBottomSheet service dan juga penggunaan bottom sheet.

am_bottomsheet.htm

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
	  
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('bottomSheetController', bottomSheetController);

         function bottomSheetController ($scope, $mdBottomSheet) {
            $scope.openBottomSheet = function() {
               $mdBottomSheet.show ({
                  template: '<md-bottom-sheet>Learn <b>Angular Material</b> @ TutorialsPoint.com!</md-bottom-sheet>'
               });
            };
         }  
      </script>      
   </head>
   
   <body ng-app = "firstApplication">
      <div ng-controller = "bottomSheetController as ctrl" layout = "column">
         <md-content class = "md-padding">
            <form ng-submit = "$event.preventDefault()">
               <md-button class = "md-raised md-primary" ng-click = "openBottomSheet()">
                  Open Bottom Sheet!
               </md-button>
            </form>
         </md-content>
      </div>
   </body>
</html>

Hasil

Verifikasi hasilnya.