ionic-framework
Расширения Ionic AngularJS
Поиск…
замечания
Ionic предлагает множество расширений Javascript 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
});