Угловой материал - нижний лист

В $mdBottomSheet, служба Angular, используется для открытия нижнего листа над приложением и предоставляет простой API-интерфейс обещаний.

Метод и описание

$mdBottomSheet.show(options);

Показать нижний лист с указанными параметрами.

SN	Параметр и описание
1	* options Объект параметров со следующими свойствами - templateUrl - {string=}- URL-адрес файла шаблона html, который будет использоваться в качестве содержимого нижнего листа. Ограничения: в шаблоне должен быть внешний элемент md-bottom-sheet. template - {string=} - То же, что templateUrl, за исключением того, что это фактическая строка шаблона. scope - {object=}- Область, с которой нужно связать шаблон / контроллер. Если ничего не указано, будет создана новая дочерняя область. Эта область будет уничтожена при удалении нижнего листа, если для preserveScope не установлено значение true. preserveScope - {boolean=}- Он определяет, следует ли сохранять область действия при удалении элемента. По умолчанию это ложь. controller - {string=} - Контроллер, связанный с этим нижним листом. locals - {string=}- Объект, содержащий пары ключ / значение. Ключи будут использоваться как имена значений для ввода в контроллер. Например,locals: {three: 3} введет три в контроллер со значением 3. clickOutsideToClose - {boolean=}- Он определяет, может ли пользователь щелкнуть за пределами нижнего листа, чтобы закрыть его. По умолчанию это правда. escapeToClose - {boolean =}: определяет, может ли пользователь нажать escape, чтобы закрыть нижний лист. По умолчанию это правда. resolve - {object=} - Подобно локальным, за исключением того, что он принимает обещания как значения, и нижний лист не открывается, пока обещания не разрешатся. controllerAs - {string =}: псевдоним, которому назначается контроллер в области видимости. parent - {element=}- Элемент, к которому нужно добавить нижний лист. Родителем может быть функция, строка, объект или значение NULL. По умолчанию добавляется к телу корневого элемента (или корневого элемента) приложения. например, angular.element (document.getElementById ('content')) или «#content». disableParentScroll - {boolean=}- Отключить ли прокрутку при открытом нижнем листе. По умолчанию true.

Старший Нет	Возврат и описание
1	promise Обещание, которое можно выполнить с помощью $ mdBottomSheet.hide () или отклонить с помощью $ mdBottomSheet.cancel ().

пример

В следующем примере показано использование $mdBottomSheet сервис, а также использование нижнего листа.

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>

Результат

Проверьте результат.