Vật liệu dạng góc - Tấm dưới cùng

Các $mdBottomSheet, một Dịch vụ Angular, được sử dụng để mở trang dưới cùng của ứng dụng và cung cấp một API hứa đơn giản.

SN Phương pháp & Mô tả
1

$mdBottomSheet.show(options);

Hiển thị trang dưới cùng với các tùy chọn được chỉ định.

SN Mô tả về Thông Số
1

* options

Một đối tượng tùy chọn, với các thuộc tính sau:

  • templateUrl - {string=}- Url của tệp mẫu html sẽ được sử dụng làm nội dung của trang dưới cùng. Hạn chế: mẫu phải có phần tử md-bottom-sheet bên ngoài.

  • template - {string=} - Giống như templateUrl, ngoại trừ đây là một chuỗi mẫu thực tế.

  • scope - {object=}- Phạm vi liên kết mẫu / bộ điều khiển tới. Nếu không có gì được chỉ định, nó sẽ tạo một phạm vi con mới. Phạm vi này sẽ bị phá hủy khi trang tính dưới cùng bị loại bỏ trừ khi bảo tồn được đặt thành true.

  • preserveScope - {boolean=}- Nó ra lệnh có bảo tồn phạm vi khi phần tử bị xóa. Theo mặc định, nó là sai.

  • controller - {string=} - Bộ điều khiển liên kết với trang tính dưới cùng này.

  • locals - {string=}- Một đối tượng chứa các cặp khóa / giá trị. Các khóa sẽ được sử dụng làm tên của các giá trị để đưa vào bộ điều khiển. Ví dụ,locals: {three: 3} sẽ đưa ba vào bộ điều khiển với giá trị là 3.

  • clickOutsideToClose - {boolean=}- Nó cho biết người dùng có thể nhấp vào bên ngoài trang dưới cùng để đóng nó hay không. Theo mặc định, nó là sự thật.

  • EscapeToClose - {boolean =}: Nó cho biết người dùng có thể nhấn phím Escape để đóng trang dưới cùng hay không. Theo mặc định, nó là sự thật.

  • resolve - {object=} - Tương tự như local, ngoại trừ việc nó lấy các lời hứa làm giá trị và trang dưới cùng sẽ không mở cho đến khi các lời hứa giải quyết xong.

  • controllerAs - {string =}: Một bí danh để gán bộ điều khiển trên phạm vi.

  • parent - {element=}- Phần tử để nối trang tính dưới cùng vào. Cha có thể là một hàm, chuỗi, đối tượng hoặc null. Mặc định gắn vào phần thân của phần tử gốc (hoặc phần tử gốc) của ứng dụng. ví dụ: angle.element (document.getElementById ('content')) hoặc "#content".

  • disableParentScroll - {boolean=}- Có tắt tính năng cuộn trong khi trang dưới cùng đang mở hay không. Mặc định đúng.

Sr.No Trả hàng & Mô tả
1

promise

Một lời hứa có thể được giải quyết bằng $ mdBottomSheet.hide () hoặc bị từ chối với $ mdBottomSheet.cancel ().

Thí dụ

Ví dụ sau đây cho thấy việc sử dụng $mdBottomSheet dịch vụ và cả việc sử dụng tờ dưới cùng.

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>

Kết quả

Xác minh kết quả.