Учебники

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

Декабрь 8, 2018

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

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

$ mdBottomSheet.show (варианты);

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

SN Параметр и описание
1

* опции

Объект параметров со следующими свойствами:

  • templateUrl — {string =} — URL-адрес файла шаблона html, который будет использоваться в качестве содержимого нижнего листа. Ограничения: шаблон должен иметь внешний элемент md-bottom-sheet.

  • template — {string =} — То же, что templateUrl, за исключением того, что это фактическая строка шаблона.

  • scope — {object =} — Область действия, к которой нужно привязать шаблон / контроллер. Если ничего не указано, будет создана новая дочерняя область. Эта область будет уничтожена при удалении нижнего листа, если для preserveScope не установлено значение true.

  • preserveScope — {boolean =} — определяет, следует ли сохранять область при удалении элемента. По умолчанию это ложь.

  • controller — {string =} — Контроллер, связанный с этим нижним листом.

  • locals — {string =} — объект, содержащий пары ключ / значение. Ключи будут использоваться как имена значений для ввода в контроллер. Например, localals: {three: 3} вставит три в контроллер со значением 3.

  • clickOutsideToClose — {boolean =} — определяет, может ли пользователь щелкнуть вне нижнего листа, чтобы закрыть его. По умолчанию это правда.

    • escapeToClose — {boolean =}: он определяет, может ли пользователь нажать клавишу escape, чтобы закрыть нижний лист. По умолчанию это правда.

  • resolv — {object =} — Аналогично местным жителям, за исключением того, что в качестве значений он принимает обещания, и нижний лист не открывается до разрешения обещаний.

    • controllerAs — {string =}: псевдоним, которому назначается контроллер в области.

  • parent — {element =} — Элемент, к которому нужно добавить нижний лист. Родитель может быть функцией, строкой, объектом или нулем. По умолчанию добавляется в тело корневого элемента (или корневого элемента) приложения. например, angular.element (document.getElementById (‘content’)) или «#content».

  • disableParentScroll — {boolean =} — Отключить ли прокрутку, когда открыт нижний лист. По умолчанию верно.

Sr.No Возвращает и описание
1

обещание

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

$ mdBottomSheet.show (варианты);

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

* опции

Объект параметров со следующими свойствами:

templateUrl — {string =} — URL-адрес файла шаблона html, который будет использоваться в качестве содержимого нижнего листа. Ограничения: шаблон должен иметь внешний элемент md-bottom-sheet.

template — {string =} — То же, что templateUrl, за исключением того, что это фактическая строка шаблона.

scope — {object =} — Область действия, к которой нужно привязать шаблон / контроллер. Если ничего не указано, будет создана новая дочерняя область. Эта область будет уничтожена при удалении нижнего листа, если для preserveScope не установлено значение true.

preserveScope — {boolean =} — определяет, следует ли сохранять область при удалении элемента. По умолчанию это ложь.

controller — {string =} — Контроллер, связанный с этим нижним листом.

locals — {string =} — объект, содержащий пары ключ / значение. Ключи будут использоваться как имена значений для ввода в контроллер. Например, localals: {three: 3} вставит три в контроллер со значением 3.

clickOutsideToClose — {boolean =} — определяет, может ли пользователь щелкнуть вне нижнего листа, чтобы закрыть его. По умолчанию это правда.

resolv — {object =} — Аналогично местным жителям, за исключением того, что в качестве значений он принимает обещания, и нижний лист не открывается до разрешения обещаний.

parent — {element =} — Элемент, к которому нужно добавить нижний лист. Родитель может быть функцией, строкой, объектом или нулем. По умолчанию добавляется в тело корневого элемента (или корневого элемента) приложения. например, angular.element (document.getElementById (‘content’)) или «#content».

disableParentScroll — {boolean =} — Отключить ли прокрутку, когда открыт нижний лист. По умолчанию верно.

обещание

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

пример

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

am_bottomsheet.htm

Live Demo

<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>

Результат

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

40
Share: