ionic-framework
Расширения Ionic AngularJS

замечания

Вводы формы

Ионные входы ничем не отличаются от обычных входов HTML, но они оформлены по-разному и используются в качестве директивы. Вы также можете использовать обычные входы HTML в приложениях Ionic. Вот некоторые основные примеры, которые Ionic предлагает готовым к использованию.

Checkbox:

<ion-checkbox ng-model="checkbox">Label</ion-checkbox>

Переключатель:

<ion-radio ng-model="radio" ng-value="'radiovalue'">Value</ion-radio>

Переключение:

<ion-toggle ng-model="toggle" toggle-class="toggle-calm">Toggle</ion-toggle>

Модальные окна

У Ionic есть собственное расширение для отображения модального окна. Модальности можно создать, вставив шаблон прямо в представление тегом <script> или используя отдельный файл шаблона. В этом примере мы предполагаем, что у вас есть html-файл с именем modal-template.html в папке с именем templates . Вы устанавливаете путь шаблона в функции модальной инициализации с fromTemplateUrl функции fromTemplateUrl .

Создание модального объекта в области

HTML

<ion-modal-view>
  <ion-header-bar>
    <h1>Modal title</h1>
  </ion-header-bar>
  <ion-content>
    <p>Modal content</p>
  </ion-content>
</ion-modal-view> 

контроллер

$ionicModal.fromTemplateUrl('/templates/modal-template.html', {
  scope: $scope,
  animation: 'slide-in-up'
}).then(function(modal) {
  $scope.modal = modal;
});

Управление модальным

Затем вы можете управлять модальным с помощью следующих команд.

Открыть

$scope.modal.show();

Закрыть модальный

$scope.modal.hide();

Удалить модальные

$scope.modal.remove();

Модальные события

Вы можете прослушивать модальные события со следующими функциями.

Модаль скрыт

$scope.$on('modal.hidden', function() {
  // Do something when modal is hidden
});

Модаль удален

$scope.$on('modal.removed', function() {
  // Do something when modal is removed
});