Açısal Malzeme - Alt Sac

$mdBottomSheet, bir Angular Service, uygulamanın üzerinde bir alt sayfa açmak için kullanılır ve basit bir vaat API'si sağlar.

Yöntem ve Açıklama

$mdBottomSheet.show(options);

Belirtilen seçeneklerle bir alt sayfa gösterin.

SN	Parametre ve Açıklama
1	* options Aşağıdaki özelliklere sahip bir options nesnesi - templateUrl - {string=}- Alt sayfanın içeriği olarak kullanılacak bir html şablon dosyasının url'si. Kısıtlamalar: Şablonun bir dış md-alt-sayfa öğesi olmalıdır. template - {string=} - Bu gerçek bir şablon dizesi olması dışında templateUrl ile aynıdır. scope - {object=}- Şablon / denetleyicinin bağlanacağı kapsam. Hiçbiri belirtilmezse, yeni bir alt kapsam oluşturacaktır. PreserveScope true olarak ayarlanmadıkça, alt sayfa kaldırıldığında bu kapsam yok edilecektir. preserveScope - {boolean=}- Öğe kaldırıldığında kapsamın korunup korunmayacağını belirler. Varsayılan olarak yanlıştır. controller - {string=} - Bu alt sayfayla ilişkilendirilecek denetleyici. locals - {string=}- Anahtar / değer çiftleri içeren bir nesne. Anahtarlar, denetleyiciye enjekte edilecek değerlerin adları olarak kullanılacaktır. Örneğin,locals: {three: 3} 3 değerini kontrolöre enjekte edecek. clickOutsideToClose - {boolean=}- Kullanıcının onu kapatmak için alt sayfanın dışına tıklayıp tıklayamayacağını belirler. Varsayılan olarak doğrudur. escapeToClose - {boolean =}: Kullanıcının alt sayfayı kapatmak için escape tuşuna basıp basamayacağını belirler. Varsayılan olarak doğrudur. resolve - {object=} - Yerlilere benzer, ancak vaatleri değer olarak alması ve alt sayfa vaatler çözülene kadar açılmayacaktır. controllerAs - {string =}: Denetleyiciyi kapsam üzerinde atamak için bir takma ad. parent - {element=}- Alt sayfanın ekleneceği öğe. Üst öğe bir işlev, dizge, nesne veya boş olabilir. Uygulamanın kök öğesinin (veya kök öğesinin) gövdesine eklemeye varsayılanlar. örneğin açısal.element (document.getElementById ('içerik')) veya "# içerik". disableParentScroll - {boolean=}- Alt sayfa açıkken kaydırmanın devre dışı bırakılıp bırakılmayacağı. Varsayılan doğru.

Sr.No	İade ve Açıklama
1	promise $ MdBottomSheet.hide () ile çözülebilen veya $ mdBottomSheet.cancel () ile reddedilebilen bir söz.

Misal

Aşağıdaki örnek, $mdBottomSheet hizmet ve ayrıca alt sayfanın kullanımı.

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>

Sonuç

Sonucu doğrulayın.