Расширения AngularJS

Ionic - это и CSS-фреймворк, и Javascript UI-библиотека. Javascript часто требуется для выполнения тех или иных сценариев, хотя компоненты могут быть зачастую использованы без сопровождающего программного кода, а только за счет расширений фреймворка. Такими расширениями являются, например, расширения AngularIonic.

Ionic следует шаблону контроллера (View Controller), популяризированному в других фреймворках, например, Cocoa Touch. В шаблоне View Controller мы рассматриваем разные разделы интерфейса как дочерние представления вида или даже дочерние контроллеры вида, которые содержат другие виды. Затем контроллеры вида "приводят в действие" области просмотра, находящиеся внутри них, чтобы обеспечить взаимодействие и функциональность пользовательского интерфейса. Прекрасным примером может служить Tab Bar View Controller - контроллер вида вкладки в интерфейсе панели вкладок, который обрабатывает тапы по панели вкладок, с помощью которых происходит переключение между панелями, доступными для просмотра.

Ознакомьтесь с предлагаемой нами документацией по API, которая содержит подробную информацию о контроллерах вида и утилитах Javascript, которые имеются в Ionic.

Action Sheet

Action Sheet, или список действий - это выдвигающаяся панель, которая позволяет пользователю выбирать нужное действие из предлагаемого набора опций.
Опасные опции подсвечиваются красным цветом, их сразу очень хорошо видно.

Убрать с экрана список действий очень легко, можно коснуться фоновой области за пределами списка или, например, нажать кнопку "escape" на клавиатуре с рабочего стола.

Применение

Чтобы список действий Action Sheet работал в вашем коде, воспользуйтесь сервисом $ionicActionSheet и контроллерами Angular.

angular.module('mySuperApp', ['ionic'])
.controller(function($scope, $ionicActionSheet, $timeout) {

 // Triggered on a button click, or some other target
 $scope.show = function() {

   // Show the action sheet
   var hideSheet = $ionicActionSheet.show({
     buttons: [
       { text: '<b>Share</b> This' },
       { text: 'Move' }
     ],
     destructiveText: 'Delete',
     titleText: 'Modify your album',
     cancelText: 'Cancel',
     cancel: function() {
          // add cancel code..
        },
     buttonClicked: function(index) {
       return true;
     }
   });

   // For example's sake, hide the sheet after two seconds
   $timeout(function() {
     hideSheet();
   }, 2000);

 };
});

Методы

show(options)

Загрузка и возврат нового списка действий.

Будет создана новая область действия идентификатора для
списка действий, и новый элемент добавится в тело.

• Возвращает:
  functionhideSheet Функция, которая при вызове скрывает или отменяет список действий.

$ionicBackdrop

Отображает и прячет фоновую область поверх UI. Появляется позади всплывающих окон, индикаторов загрузки и других оверлеев (overlays).

Очень часто многие компоненты UI требуют наличия фоновой области, но за один раз в DOM бывает нужна только одна фоновая область.

Поэтому каждый компонент, требующий отображения фоновой области, вызывает
$ionicBackdrop.retain(), когда ему нужен фон, затем $ionicBackdrop.release(),когда фон становится не нужен.

Каждый раз, когда вызывается retain, фоновая область будет отображаться до тех пор, пока не будет вызван release.

Например, если retain вызывается три раза, фон будет отображаться, пока так же три раза не будет вызван release.

Примечание:
Сервис фона домашнего экрана будет распространять события backdrop.shown’ и ‘backdrop.hidden’ из корневой области видимости (root scope),
это удобно для оповещения нативных компонентов, содержащихся не в HTML.

Применение

function MyController($scope, $ionicBackdrop, $timeout, $rootScope) {
  //Show a backdrop for one second
  $scope.action = function() {
    $ionicBackdrop.retain();
    $timeout(function() {
      $ionicBackdrop.release();
    }, 1000);
  };

  // Execute action on backdrop disappearing
  $scope.$on('backdrop.hidden', function() {
    // Execute action
  });

  // Execute action on backdrop appearing
  $scope.$on('backdrop.shown', function() {
    // Execute action
  });

}

Methods

retain()

Retains the backdrop.

release()

Releases the backdrop.

Контент

ion-content

Delegate: $ionicScrollDelegate

Директива ionContent предоставляет легкую в использовании область контента, которую можно настраивать, для того чтобы задействовать, имеющийся в Ionic пользовательский просмотр в режиме прокрутки (Scroll View) или встроенную в браузер функцию добавления полосы прокрутки при переполнении блока.

Мы все-таки рекомендуем в большинстве случаев использовать настраиваемые Scroll-функции, имеющиеся в Ionic, но иногда (по соображениям улучшения производительности) будет уместно применить нативный для браузера скроллинг при переполнении блоков. Мы сделали так, что переключаться между функцией прокрутки в Ionic и прокруткой при переполнении стало очень легко.

Вы можете обновлять данные, выполняя pull-to-refresh ("потяни, чтобы обновить") с помощью директивы ionRefresher, а бесконечную прокрутку с помощью директивы ionInfiniteScroll.

Если внутри ion-content есть какой-либо динамический контент, не забудьте после добавления контента сделать вызов функции .resize() с помощью $ionicScrollDelegate.

Имейте в виду, что эта директива получает собственную дочернюю область видимости. Если вы не понимаете, почему это важно, вы можете прочитать информацию, открыв ссылку https://docs.angularjs.org/guide/scope.

Применение

<ion-content
[delegate-handle=""]
[direction=""]
[locking=""]
[padding=""]
[scroll=""]
[overflow-scroll=""]
[scrollbar-x=""]
[scrollbar-y=""]
[start-x=""]
[start-y=""]
[on-scroll=""]
[on-scroll-complete=""]
[has-bouncing=""]
[scroll-event-interval=""]>
...
</ion-content>

API

ion-refresher

Дочерний элемент ionContent или ionScroll

Разрешает вам добавить функцию обновления данных pull-to-refresh к ScrollView.

Поместите его, как первый дочерний элемент от вашего элемента ionContent или
ionScroll.

Когда обновление данных завершено, идет распространение события ‘scroll.refreshComplete’ из вашего контроллера.

Применение

<ion-content ng-controller="MyController">
  <ion-refresher
    pulling-text="Pull to refresh..."
    on-refresh="doRefresh()">
  </ion-refresher>
  <ion-list>
    <ion-item ng-repeat="item in items"></ion-item>
  </ion-list>
</ion-content>

angular.module('testApp', ['ionic'])
.controller('MyController', function($scope, $http) {
  $scope.items = [1,2,3];
  $scope.doRefresh = function() {
    $http.get('/new-items')
     .success(function(newItems) {
       $scope.items = newItems;
     })
     .finally(function() {
       // Stop the ion-refresher from spinning
       $scope.$broadcast('scroll.refreshComplete');
     });
  };
});

ion-pane

Простой контейнер, соответствующий размеру контента. Не имеет побочных эффектов. Добавляет элементу класс "pane".

Применение

<ion-pane>
...
</ion-pane>

Инпуты

ion-checkbox

Простой контейнер, соответствующий размеру контента. Не имеет побочных эффектов. Добавляет элементу класс "pane".

Применение

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

ion-radio

Радио-директива не отличается от такого элемента ввода, как радио-кнопки в HTML, только она по-другому стилизована.

Радио ведет себя, как и AngularJS радио.

Применение

<ion-radio ng-model="choice" ng-value="'A'">Choose A</ion-radio>
<ion-radio ng-model="choice" ng-value="'B'">Choose B</ion-radio>
<ion-radio ng-model="choice" ng-value="'C'">Choose C</ion-radio>

ion-toggle

Toggle - это анимированный переключатель, который привязывает данную модель к логическому значению.

Позволяет ставить переключатель в одно из двух положений - включено или выключено.

Чекбокс ведет себя так же, как любой чекбокс AngularJS.

Применение

Ниже дан пример директивы для элемента toggle, который привязан к модели airplaneMode и имеет CSS-класс toggle-calm, назначенный для внутреннего элемента.

<ion-toggle ng-model="airplaneMode" toggle-class="toggle-calm">Airplane Mode</ion-toggle>

Жесты и события

on-hold

Касание, производимое в одном и том же месте экрана, длится 500 мс. Точно такие же события с длительным касанием имеются в AngularJS и jQuery.

Применение

<button on-hold="onHold()" class="button">Test</button>

on-tap

Быстрое касание экрана. Если продолжительность касания составляет более 250 мс, это уже нельзя назвать тапом.

Применение

<button on-tap="onTap()" class="button">Test</button>

on-double-tap

Двойной тап по экрану.

Применение

<button on-double-tap="onDoubleTap()" class="button">Test</button>

on-touch

Вызывается немедленно, когда пользователь в первый раз касается экрана. Этот жест не ждет наступления события touchend/mouseup.

Применение

<button on-touch="onTouch()" class="button">Test</button>

on-release

Вызывается, когда пользователь завершает прикосновение.

Применение

<button on-release="onRelease()" class="button">Test</button>

on-drag

Перемещение одним касанием в пределах данной страницы. Рекомендуется блокирование прокрутки при движении влево и вправо. Когда все события перетаскивания блокируют действия, вы отключаете прокрутку этой области.

Применение

<button on-drag="onDrag()" class="button">Test</button>

on-drag-up

Вызывается, когда элемент перетаскивается вверх.

Применение

<button on-drag-up="onDragUp()" class="button">Test</button>

on-drag-right

Вызывается, когда элемент перетаскивается вправо.

Usage

<button on-drag-right="onDragRight()" class="button">Test</button>

on-drag-down

Вызывается, когда элемент перетаскивается вниз.

Usage

<button on-drag-down="onDragDown()" class="button">Test</button>

on-drag-left

Вызывается, когда элемент перетаскивается влево.

Usage

<button on-drag-left="onDragLeft()" class="button">Test</button>

on-swipe

Вызывается, когда свайп выполняется на высокой скорости в любом направлении.

Usage

<button on-swipe="onSwipe()" class="button">Test</button>

on-swipe-up

Вызывается, когда свайп выполняется на высокой скорости в направлении вверх.

Usage

<button on-swipe-up="onSwipeUp()" class="button">Test</button>

on-swipe-right

Вызывается, когда свайп выполняется на высокой скорости в направлении вправо.

Применение

<button on-swipe-right="onSwipeRight()" class="button">Test</button>

on-swipe-down

Вызывается, когда свайп выполняется на высокой скорости в направлении вниз.

Usage

<button on-swipe-down="onSwipeDown()" class="button">Test</button>

on-swipe-left

Вызывается, когда свайп выполняется на высокой скорости в направлении влево.

Применение

<button on-swipe-left="onSwipeLeft()" class="button">Test</button>

$ionicGesture

Служба Angular, отвечающая за Ionic-жесты
ionic.EventController.

Методы

on(eventType, callback, $element, options)

Добавляет элементу слушатель событий для жеста. См.ionic.EventController.

• Возвращает:
  ionic.Gesture Объект жеста (используйте это, чтобы потом убрать жест).

off(gesture, eventType, callback)

Убирает назначенный для элемента слушатель событий для жеста. См.ionic.EventController.

Хедер/Футер

ion-header-bar

Добавляет фиксированную строку заголовка над некоторым контентом.

Также может быть подзаголовком (расположенным ниже), если применяется класс ‘bar-subheader’. См. раздел документации the header CSS docs (хедер CSS).

Применение

<ion-header-bar align-title="left" class="bar-positive">
  <div class="buttons">
    <button class="button" ng-click="doSomething()">Left Button</button>
  </div>
  <h1 class="title">Title!</h1>
  <div class="buttons">
    <button class="button">Right Button</button>
  </div>
</ion-header-bar>
<ion-content>
  Some content!
</ion-content>

API

ion-footer-bar

Добавляет фиксированную строку футера под некоторым контентом.

Также может быть строкой с subfooter - располагаться выше футера, если применяется класс ‘bar-subfooter’. См. раздел документации thefooter CSS docs (футер CSS).

Примечание: Если вы используете ionFooterBar в сочетании с ng-if, окружающий контент не будет корректно выровнен. Скоро это будет исправлено.

Применение

<ion-content>
  Some content!
</ion-content>
<ion-footer-bar align-title="left" class="bar-assertive">
  <div class="buttons">
    <button class="button">Left Button</button>
  </div>
  <h1 class="title">Title!</h1>
  <div class="buttons" ng-click="doSomething()">
    <button class="button">Right Button</button>
  </div>
</ion-footer-bar>

API

Клавиатура

И в Android, и в iOS Ionic будет пытаться не допустить затемнения элементов ввода и элементов, имеющих фокус, когда производится скроллинг, и они входят в вид представления. Чтобы это работало, любой из элементов, имеющих фокус, должен быть в пределах Scroll View или такой директивы, как Content, которая имеет Scroll View.

Она тоже будет пытаться предотвратить прокрутку при нативном переполнении в отношении фокуса, что может повлечь проблемы с компоновкой, например, заголовки в шапках сдвинутся вверх и за пределы области представления.

Клавиатура лучше всего работает вместе с плагином Ionic Keyboard Plugin,
хотя и без него она тоже будет функционировать достаточно хорошо. Однако, если вы имеете дело с Cordova, нет причины для того, чтобы не воспользоваться данным плагином.

Скрыть, когда отображается клавиатура

Чтобы спрятать элемент, когда открыта клавиатура, добавьте класс hide-on-keyboard-open.

<div class="hide-on-keyboard-open">
  <div id="google-map"></div>
</div>

Примечание: Для улучшения производительности элементы не будут скрыты в течение 400 мс после запуска из плагина Ionic Keyboard plugin события native.keyboardshow. Если вы хотите, чтобы они тут же исчезли, вы можете сделать что-то вроде:

  window.addEventListener('native.keyboardshow', function(){
    document.body.classList.add('keyboard-open');
  });

Это добавляет тот же самый класс keyboard-open, который обычно добавляет Ionic через 400 мс после того, как открывается клавиатура. Однако имейте в виду, что добавление этого класса к телу может моментально вызвать замедления анимации на Android. Проблемы с анимацией появляются, когда открывается клавиатура (например, при прокрутке любых затемненных элементов ввода в вид представления).

Использование плагина

Информацию по использованию плагина можно найти по этой ссылке:
https://github.com/driftyco/ionic-plugins-keyboard.

Примечание для Android

• Если ваше приложение работает в полноэкранном режиме, т.е. у вас записано
  <preference name="Fullscreen" value="true" /> в файле config.xml,
  вам нужно вручную прописать ionic.Platform.isFullScreen = true
• Вы можете конфигурировать поведение веб-представления при отображении клавиатуры настройкой
  android:windowSoftInputMode,
  меняя параметры adjustPan, adjustResize или adjustNothing.
  Это делается в AndroidManifest.xml. Для Ionic рекомендуется настраивать adjustResize, но если вы используете adjustPan, вам потребуется
  откорректировать ionic.Platform.isFullScreen = true.


<activity android:windowSoftInputMode="adjustResize">

Примечание для iOS

Если контент вашего приложения (включая хедер) выходит за верхние границы области просмотра
и не виден при фокусе ввода, попытайтесь установить cordova.plugins.Keyboard.disableScroll(true).
Это не отключит скроллинг в Ionic scroll view,
это, скорее, деактивирует нативную функцию прокрутки при переполнении блока, которая обычно запускается автоматически в
результате фокуса на элементы ввода, расположенные ниже клавиатуры.

keyboard-attach

keyboard-attach - директива, которая является атрибутом, применение которого заставит элемент плавать над клавиатурой в момент ее отображения. На текущий момент поддерживает только директиву ion-footer-bar .

Примечание

• Эта директива требует плагина Ionic Keyboard Plugin.
• На Андроиде, не в полноэкранном режиме, т.е. у вас есть
  <preference name="Fullscreen" value="false" /> or no preference in your config.xml файл,
  эта директива теряет свою нужность, так как это является поведением, принятым по умолчанию.
• На iOS, если имеется ввод у вас в футере, вам нужно будет установить
  cordova.plugins.Keyboard.disableScroll(true).

Применение

 <ion-footer-bar align-title="left" keyboard-attach class="bar-assertive">
   <h1 class="title">Title!</h1>
 </ion-footer-bar>

Списки

ion-list

Delegate: $ionicListDelegate

Список (list) - это широко используемый практически в каждом мобильном приложении элемент интерфейса. Он может содержать разнообразный контент, начиная с обычного текста, заканчивая кнопками, переключателями, иконками и пиктограммами.

Как сам список, так и входящие в него пункты могут представлять собой
любой элемент HTML. Данный элемент требует присвоения класса list, а каждый входящий в состав списка пункт требует присвоения класса item.

Однако использование директив ionList и ionItem легко обеспечивает поддержку различных режимов взаимодействия, таких как "проведите пальцем для редактирования", "перетащите, чтобы изменить порядок пунктов в списке", а также удаления пунктов списка.

Применение

<ion-list>
  <ion-item ng-repeat="item in items">
    Hello, {{item}}!
  </ion-item>
</ion-list>

<ion-list ng-controller="MyCtrl"
          show-delete="shouldShowDelete"
          show-reorder="shouldShowReorder"
          can-swipe="listCanSwipe">
  <ion-item ng-repeat="item in items"
            class="item-thumbnail-left">

    <img ng-src="{{item.img}}">
    <h2>{{item.title}}</h2>
    <p>{{item.description}}</p>
    <ion-option-button class="button-positive"
                       ng-click="share(item)">
      Share
    </ion-option-button>
    <ion-option-button class="button-assertive"
                       ng-click="edit(item)">
      Edit
    </ion-option-button>
    <ion-delete-button class="ion-minus-circled"
                       ng-click="items.splice($index, 1)">
    </ion-delete-button>
    <ion-reorder-button class="ion-navicon"
                        on-reorder="reorderItem(item, $fromIndex, $toIndex)">
    </ion-reorder-button>

  </ion-item>
</ion-list>

app.controller('MyCtrl', function($scope) {
 $scope.shouldShowDelete = false;
 $scope.shouldShowReorder = false;
 $scope.listCanSwipe = true
});

API

ion-item

Применение

<ion-list>
  <ion-item>Hello!</ion-item>
  <ion-item href="#/detail">
    Link to detail page
  </ion-item>
</ion-list>

ion-delete-button

Применение

<ion-list show-delete="shouldShowDelete">
  <ion-item>
    <ion-delete-button class="ion-minus-circled"></ion-delete-button>
    Hello, list item!
  </ion-item>
</ion-list>
<ion-toggle ng-model="shouldShowDelete">
  Show Delete?
</ion-toggle>

ion-reorder-button

Дочерний эллемент ionItem

Применение

<ion-list ng-controller="MyCtrl" show-reorder="true">
  <ion-item ng-repeat="item in items">
    Item 
    <ion-reorder-button class="ion-navicon"
                        on-reorder="moveItem(item, $fromIndex, $toIndex)">
    </ion-reorder-button>
  </ion-item>
</ion-list>

function MyCtrl($scope) {
  $scope.items = [1, 2, 3, 4];
  $scope.moveItem = function(item, fromIndex, toIndex) {
    //Move the item in the array
    $scope.items.splice(fromIndex, 1);
    $scope.items.splice(toIndex, 0, item);
  };
}

API

ion-option-button

Дочерний элемент ionItem

Создает кнопку выбора внутри пункта списка, она становится видна, когда пользователь
делает по данному пункту списка свайп влево. Открытые свайпом кнопки выбора могут быть скрыты с помощью
$ionicListDelegate.closeOptionButtons.

Может быть назначен любой класс кнопок.

Для более подробного объяснения и дополнительных примеров см. ionList

Применение

<ion-list>
  <ion-item>
    I love kittens!
    <ion-option-button class="button-positive">Share</ion-option-button>
    <ion-option-button class="button-assertive">Edit</ion-option-button>
  </ion-item>
</ion-list>

collection-repeat

collection-repeat позволяет приложению отображать списки, содержащие огромное количество пунктов. При этом действует более эффективно, чем ng-repeat.

В DOM передаются только те пункты, которые видны в данный момент.

Это означает, что на экране телефона, где могут уместиться только восемь пунктов списка, будут в данном виде отображения видны восемь пунктов списка (без применения прокрутки).

Основы:

• Данные, передающиеся в collection-repeat, должны представлять собой массив.
• Если не предоставляются атрибуты item-height и item-width, будет сделано допущение, что каждый пункт в списке имеет точно такие же размеры, как и самый первый его пункт.
• Не используйте с collection-repeat одноразовую привязку Angular (::). По мере прокрутки области видимости каждого пункта из списка присваиваются новые данные, и происходит процесс переклассификации. Привязки нуждаются в обновлениях, а одноразовым привязкам обновление не нужно.

Возможности повышения производительности:

• Узкое место производительности веб-представления в iOS наблюдается при отключении атрибутов <img src>.
  Чтобы увеличить эффективность работы с изображениями в iOS, заранее поместите изображения в кэш и, если возможно, уменьшите число уникальных изображений. 

Usage

Basic Item List (codepen)

<ion-content>
  <ion-item collection-repeat="item in items">
    {{item}}
  </ion-item>
</ion-content>

Grid of Images (codepen)

<ion-content>
  <img collection-repeat="photo in photos"
    item-width="33%"
    item-height="200px"
    ng-src="{{photo.url}}">
</ion-content>

Horizontal Scroller, Dynamic Item Width (codepen)

<ion-content>
  <h2>Available Kittens:</h2>
  <ion-scroll direction="x" class="available-scroller">
    <div class="photo" collection-repeat="photo in main.photos"
       item-height="250" item-width="photo.width + 30">
       <img ng-src="{{photo.src}}">
    </div>
  </ion-scroll>
</ion-content>

API

$ionicListDelegate

Делегат для управления директивой ionList.

Вызываемые напрямую методы сервиса $ionicListDelegate будут управлять всеми списками.
Используйте метод $getByHandle, чтобы управлять указанными экземплярами ionList. 

Применение

<ion-content ng-controller="MyCtrl">
  <button class="button" ng-click="showDeleteButtons()"></button>
  <ion-list>
    <ion-item ng-repeat="i in items">
      Hello, {{i}}!
      <ion-delete-button class="ion-minus-circled"></ion-delete-button>
    </ion-item>
  </ion-list>
</ion-content>

function MyCtrl($scope, $ionicListDelegate) {
  $scope.showDeleteButtons = function() {
    $ionicListDelegate.showDelete(true);
  };
}

Методы

Загрузка

$ionicLoading

Оверлей, который можно использовать для индикации действия во время блокировки действий пользователя.

Применение

angular.module('LoadingApp', ['ionic'])
.controller('LoadingCtrl', function($scope, $ionicLoading) {
  $scope.show = function() {
    $ionicLoading.show({
      template: 'Loading...'
    });
  };
  $scope.hide = function(){
    $ionicLoading.hide();
  };
});

Методы

show(opts)

Отображает индикатор загрузки. Если индикатор уже отображается,
он настроит имеющиеся опции и продолжит отображать индикатор. Примечание: Пока эта
функция продолжает возвращать экземпляр $ionicLoading для обратной совместимости,
использовать ее не рекомендуется.

hide()

Скрывает индикатор загрузки, если он отображается.

$ionicLoadingConfig

Устанавливает дефолтные опции, которые требуется передать сервису $ionicLoading.

Применение

var app = angular.module('myApp', ['ionic'])
app.constant('$ionicLoadingConfig', {
  template: 'Default Loading Template...'
});
app.controller('AppCtrl', function($scope, $ionicLoading) {
  $scope.showLoading = function() {
    $ionicLoading.show(); //options default to values in $ionicLoadingConfig
  };
});

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

$ionicModal

Смежные темы: ionicModal controller.

Модальное окно - это панель с контентом, которая временно может появиться поверх основного вида представления пользователя.Обычно используется для совершения выбора или редактирования элемента (пункта).

Поместите контент модального окна внутрь элемента <ion-modal-view>.

Примечание:
Модальное окно будет транслировать события ‘modal.shown’, ‘modal.hidden’, and ‘modal.removed’ из инициирующей его области видимости, передавая себя в качестве аргумента события. Оба события - и modal.removed, и modal.hidden
вызываются тогда, когда модальное окно убрано.

• Этот пример предполагает, что ваше модальное окно находится в главном файле индекса или другом файле-шаблоне. Если оно находится в своем собственном
  файле-шаблоне, уберите теги script и назовите его по имени файла.

Usage

<script id="my-modal.html" type="text/ng-template">
  <ion-modal-view>
    <ion-header-bar>
      <h1 class="title">My Modal title</h1>
    </ion-header-bar>
    <ion-content>
      Hello!
    </ion-content>
  </ion-modal-view>
</script>

angular.module('testApp', ['ionic'])
.controller('MyController', function($scope, $ionicModal) {
  $ionicModal.fromTemplateUrl('my-modal.html', {
    scope: $scope,
    animation: 'slide-in-up'
  }).then(function(modal) {
    $scope.modal = modal;
  });
  $scope.openModal = function() {
    $scope.modal.show();
  };
  $scope.closeModal = function() {
    $scope.modal.hide();
  };
  //Cleanup the modal when we're done with it!
  $scope.$on('$destroy', function() {
    $scope.modal.remove();
  });
  // Execute action on hide modal
  $scope.$on('modal.hidden', function() {
    // Execute action
  });
  // Execute action on remove modal
  $scope.$on('modal.removed', function() {
    // Execute action
  });
});

Методы

fromTemplate(templateString, options)

• Возвращает:
  object Экземпляр контроллера ionicModal.

fromTemplateUrl(templateUrl, options)

• Возвращает:
  promise Обещание, которое будет выполнено с помощью экземпляра
  контроллера ionicModal.

ionicModal

Обрабатывается сервисом $ionicModal.

После того, как вы закончили с каждым из модальных окон, обязательно вызовите remove(), чтобы провести очистку и избежать утечек памяти.

Примечание: модальное окно будет транслировать события ‘modal.shown’, ‘modal.hidden’, and ‘modal.removed’ из инициирующей его области видимости, передавая себя в качестве аргумента события. Примечание: Оба события - и modal.removed, и modal.hidden
вызываются тогда, когда модальное окно убрано.

Методы

initialize(options)

Создает новый экземпляр модального контроллера.

show()

Отображает этот экземпляр модального окна.

• Возвращает:
  promise Обещание, которое разрешено (resolved), когда закончится анимация внутреннего контента модального окна.

hide()

Скрывает этот экземпляр модального окна.

• Возвращает:
  promise Обещание, которое разрешено, когда закончится анимация модального окна.

remove()

Убирает этот экземпляр модального окна из дерева DOM и выполняет очистку.

• Возвращает:
  promise Обещание, которое разрешено, когда закончится анимация модального окна.

isShown()

• Возвращает:
  логическое значение Определяет, отображается ли в текущий момент это модальное окно.

Навигация

ion-nav-view

Пользователь использует навигацию для переходов по приложению, а Ionic способен отслеживать историю его перемещений. Зная историю, переходы между видами представлений корректно происходят во всех направлениях с использованием стиля переходов, характерным для платформы. Дополнительное преимущество навигационной системы Ionic состоит в его способности управлять несколькими историями. Например, каждая вкладка может иметь свою историю перемещений.

Ionic использует модуль AngularUI Router, поэтому интерфейсы приложений могут быть организованы в различные "состояния". Как и базовый $route-сервис у Angular, управлять видами представлений так же могут и URL. Однако AngularUI Router является более мощным менеджером состояний, состояния привязаны к видам - с именем, вложенным и параллельным, позволяя более, чем одному шаблону быть представленным на одной и той же странице. К тому же каждое состояние не обязательно должно быть привязано к URL, и данные могут доставляться к каждому из состояний, которые позволяют большую гибкость.

Директива ionNavView используется для рендеринга шаблонов в ваше приложение. Каждый шаблон является частью состояния. К состояниям обычно привязан адрес URL, и они определяются программным образом с помощью angular-ui-router (см. документы,
и помните, что в примерах нужно заменить ui-view на ion-nav-view).

Применение

В этом примере мы создадим видовое представление навигации, которое содержит разные состояния для конкретного приложения.

Чтобы это сделать, в нашей разметке мы используем директиву верхнего уровня. Для отображения строки заголовка мы используем директиву ionNavBar, которая обновляется по мере нашего продвижения по стеку переходов.

Затем нам понадобится установить состояния, которые будут рендериться.

var app = angular.module('myApp', ['ionic']);
app.config(function($stateProvider) {
  $stateProvider
  .state('index', {
    url: '/',
    templateUrl: 'home.html'
  })
  .state('music', {
    url: '/music',
    templateUrl: 'music.html'
  });
});

Затем при запуске приложения $stateProvider будет смотреть на адрес URL, определяя, подходит ли он состоянию индекса, и затем попытается загрузить home.html в <ion-nav-view>. 

Страницы загружаются согласно заданным адресам URL. Один простой способ создания шаблонов в Angular предполагает записывать их напрямую в ваш HTML-файл и использовать синтакс <script type="text/ng-template">.
Вот один из способов записи home.html в наше приложение:

<script id="home" type="text/ng-template">
  
  <ion-view view-title="Home">
    <ion-content ng-controller="HomeCtrl">
      
      <a href="#/music">Go to music page!</a>
    </ion-content>
  </ion-view>
</script>

Это хороший способ, потому что шаблон будет помещаться в кэш и, следовательно, будет очень быстро загружаться, а не браться из сети.

Кеширование

По умолчанию виды представлений кэшируются, это улучшает производительность. Когда из вида уже совершен переход, его элемент остается в структуре DOM, и область видимости отключается от цикла $watch. Когда перемещение в вид уже помещено в кэш, область видимости снова подключается, и существующий элемент, который был оставлен в DOM, становится активным видом представления. Это также позволяет поддерживать
положение полосы прокрутки предыдущих видов.

Кэширование можно отключать и включать многими способами. По умолчанию Ionic будет кэшировать максимум 10 видов, но не только этот параметр можно настраивать, приложения тоже могут прямо указывать, какие виды следует и не следует кэшировать.

Имейте в виду, что от того, что мы помещаем эти виды в кэш, мы не разрушаем области видимости. Вместо этого области видимости отключаются от цикла наблюдения. Так как области видимости не разрушаются и воссоздаются заново, контроллеры не загружаются опять при последующем просмотре. Если приложению/контроллеру требуется знать, когда вид вошел или вышел, то могут быть полезны события вида, которые генерируются из области видимости ionView, такие как $ionicView.enter.

По умолчанию, когда происходит перемещение назад в истории, "последующие" виды убираются из кэша.
Если вы перемещаетесь вперед, снова в тот же самый вид, то будет создан новый DOM-элемент и экземпляр контроллера. В основном, любые последующие виды каждый раз переустанавливаются. Это можно конфигурировать, используя
$ionicConfigProvider:

$ionicConfigProvider.views.forwardCache(true);

Глобальное отключение кэширования

Можно использовать $ionicConfigProvider для того чтобы установить максимально разрешенное число видов, которое может быть помещено в кэш. Но эту функцию можно также использовать и для общего отключения кэширования, если числовое значение записать как 0.

$ionicConfigProvider.views.maxCache(0);

Отключение кэширования в рамках состояния провайдера

$stateProvider.state('myState', {
   cache: false,
   url : '/myUrl',
   templateUrl : 'my-template.html'
})

Отключение кэширования с помощью значений атрибутов

<ion-view cache-view="false" view-title="My Title!">
  ...
</ion-view>

AngularUI Router

Дополнительную информацию можно найти в AngularUI Router’s docs
Ниже вы найдете видеоролик, созданный командой, занимающейся разработкой AngularUI Router. Видео поможет объяснить, как это все работает.

API

ion-view

Дочерний элемент ionNavView

Контейнер для контента вида и любой информации, относящейся к панели навигации и строке заголовка. Когда вид входит и выходит из своего родительского ionNavView, вид также генерирует информацию, такую как заголовок, или то, должна ли отображаться кнопка возврата или нет, должна ли демонстрироваться соответствующая директива ionNavBar или нет, какой из переходов должен сопровождаться анимацией, и в каком направлении анимация должна осуществляться.

Виды помещаются в кэш для улучшения производительности. Когда из вида уже совершен переход, его элемент остается в структуре DOM, и область видимости отсоединяется от цикла $watch. При перемещении в вид, который уже находится в кэше, его область видимости подключается заново, и существующий элемент, который был
оставлен в структуре DOM, снова становится активным. Это можно отключить, или же максимальное число видов, находящихся в кэше, можно изменить в $ionicConfigProvider, в конфигурации вида $state, или
с помощью изменения значения атрибута самого вида (см. ниже).

Применение

Ниже дан пример того, как страница будет загружена с ionNavBar, где в качестве заголовка содержится “My Page”.

<ion-nav-bar></ion-nav-bar>
<ion-nav-view>
  <ion-view view-title="My Page">
    <ion-content>
      Hello!
    </ion-content>
  </ion-view>
</ion-nav-view>

Жизненный цикл вида и события

Виды можно кэшировать, а это означает, что контроллеры нормально загружаются только один раз. Это может повлиять на логику вашего контроллера. Чтобы знать, когда вид стал доступен или уже нет, были добавлены события, которые эмитируются из области видимости вида. Эти события также содержат данные о виде представления, такие как заголовок и информации о том, должна ли отображаться кнопка возврата. Также содержатся данные перехода, такие как тип перехода и направление, которое или будет, или уже было использовано.

Кэширование

Кэширование можно отключать и включать многими способами. По умолчанию Ionic будет кэшировать максимум 10 видов. Вы можете принять необязательное решение отключить кэширование либо для отдельного вида, либо в глобальной конфигурации. Дополнительную информацию смотрите в главе Caching (кэширование) раздел ionNavView

API

ion-nav-bar

Delegate: $ionicNavBarDelegate

Если у нас имеется директива ionNavView, мы также можем создать
<ion-nav-bar, который создаст верхнюю строку, которая будет обновляться по мере изменения состояния приложения.

Мы можем добавить кнопку возврата, поместив ionNavBackButton внутрь.

Мы можем добавить кнопки в зависимости от видимого в данный момент представления, используя ionNavButtons.

Имейте в виду, что элемент ion-nav-bar будет работать корректно, если вокруг вашего контента находится ionView.

Применение

<body ng-app="starter">
  
  <ion-nav-bar class="bar-positive">
  </ion-nav-bar>

  
  <ion-nav-view>
    <ion-view>
      <ion-content>Hello!</ion-content>
    </ion-view>
  </ion-nav-view>
</body>

API

ion-nav-back-button

Дочерний элемент ionNavBar

Создает кнопку возврата внутри ionNavBar.

Кнопка возврата появится, когда пользователь имеет возможность совершить обратный шаг в текущем стеке переходов. По умолчанию описание кнопки возврата выстраивается автоматически пр помощи соответствующих параметров, принятых по умолчанию в данной платформе (iOS-иконка кнопки возврата в iOS и Android-иконка в Android).

В дополнение к этому кнопка автоматически настраивается $ionicGoBack() на клик/тап. По умолчанию при нажатии на кнопку возврата приложение перейдет на один вид назад. Возможно и более продвинутое поведение, такое, как описано ниже.

Применение

Рекомендуемая разметка для настроек по умолчанию.

<ion-nav-bar>
  <ion-nav-back-button>
  </ion-nav-back-button>
</ion-nav-bar>

<ion-nav-bar>
  <ion-nav-back-button class="button-clear">
    <i class="ion-arrow-left-c"></i> Back
  </ion-nav-back-button>
</ion-nav-bar>

<ion-nav-bar ng-controller="MyCtrl">
  <ion-nav-back-button class="button-clear"
    ng-click="myGoBack()">
    <i class="ion-arrow-left-c"></i> Back
  </ion-nav-back-button>
</ion-nav-bar>

function MyCtrl($scope, $ionicHistory) {
  $scope.myGoBack = function() {
    $ionicHistory.goBack();
  };
}

ion-nav-buttons

Дочерний элемент ionNavView

Используйте кнопки навигации, чтобы настроить кнопки на вашей ionNavBar
изнутри ionView. Это дает каждому шаблону вида возможность определить, какие кнопки должны отображаться в навигационной панели, имея приоритет над любыми дефолтными кнопками, уже находящимися в навигационной панели.

Любые заявленные кнопки будут размещены в навигационной панели с соответствующей стороны. Кнопки, имеющие приоритет, как правило, располагаются с левой стороны хедера, а второстепенные кнопки, в основном, находятся с правой стороны. Однако за точное расположение кнопок отвечает непосредственно сама платформа.
Например, в iOS основные кнопки помещены в самый левый край хедера, а
второстепенные кнопки - в самом правом краю, заголовок "шапки" располагается по центру между ними. Однако для Android обе группы кнопок размещаются с правого края "шапки", заголовок шапки смещен влево.

Мы рекомендуем всегда использовать параметры основные и второстепенные, так кнопки правильно занимают место на своей стороне шапки, это удобно для пользователей каждой из платформ. Но в случаях, когда кнопки должны всегда быть на определенной стороне, возможно использовать и левое, и правое расположение. Например,
кнопка переключения (toggle) для меню расположенного слева должна быть на левой стороне; в этом случае мы бы рекомендовали использовать side="left", чтобы она всегда была слева независимо от платформы.

Имейте в виду, что ion-nav-buttons должны быть непосредственными потомками ion-view или элементом ion-nav-bar (проще говоря, не "заворачивайте" его в другой div).

Применение

<ion-nav-bar>
</ion-nav-bar>
<ion-nav-view>
  <ion-view>
    <ion-nav-buttons side="primary">
      <button class="button" ng-click="doSomething()">
        I'm a button on the primary of the navbar!
      </button>
    </ion-nav-buttons>
    <ion-content>
      Some super content here!
    </ion-content>
  </ion-view>
</ion-nav-view>

API

ion-nav-title

Дочерний элемент ionNavView

Директива навигации по заголовку замещает текст заголовка ionNavBar
собственным HTML-кодом, взятым из шаблона ionView. Это дает каждому виду способность определять свой собственный настраиваемый элемент заголовка, такой как изображение или любой код HTML, а не всего лишь text-only. Или же, заголовки text-only могут быть обновлены при использовании атрибута view-titleionView.

Имейте в виду, что ion-nav-title должны быть непосредственными потомками ion-view или элементом ion-nav-bar (проще говоря, не "заворачивайте" его в другой div).

Применение

<ion-nav-bar>
</ion-nav-bar>
<ion-nav-view>
  <ion-view>
    <ion-nav-title>
      <img src="logo.svg">
    </ion-nav-title>
    <ion-content>
      Some super content here!
    </ion-content>
  </ion-view>
</ion-nav-view>

nav-transition

Тип перехода, который должен использовать переход nav view при анимации.
Сейчас опции ограничены вариантами ios, android и none. Скоро появится больше опций.

Применение

<a nav-transition="none" href="#/home">Home</a>

nav-direction

Направление, в котором должна осуществляться анимация перехода nav view. Доступны следующие опции: forward, back, enter, exit, swap (вперед, назад, ввод, выход, перестановка)

Применение

<a nav-direction="forward" href="#/home">Home</a>

$ionicNavBarDelegate

Делегирует управление директивой ionNavBar

Применение

<body ng-controller="MyCtrl">
  <ion-nav-bar>
    <button ng-click="setNavTitle('banana')">
      Set title to banana!
    </button>
  </ion-nav-bar>
</body>

function MyCtrl($scope, $ionicNavBarDelegate) {
  $scope.setNavTitle = function(title) {
    $ionicNavBarDelegate.title(title);
  }
}

Методы

align([direction])

Выравнивает заголовок с кнопками в заданном направлении.

showBackButton([show])

Set/get для отображения ionNavBackButton (если она - кнопка возврата существует, и есть предыдущее представление вида, к которому можно перейти).

• Возвращает:
  логическое значение (boolean) Определяет, нужно ли отображать кнопку возврата.

showBar(show)

Set/get для отображения ionNavBar.

• Возвращает:
  логическое значение (boolean) Определяет, нужно ли отображать строку.

title(title)

Установить заголовок для ionNavBar.

$ionicHistory

$ionicHistory отслеживает виды во время перемещения пользователя по приложению. Точно так же, как ведет себя браузер, Ionic-приложение способно отслеживать и сохранять предыдущий вид, текущий вид и следующий за ним вид (если он есть). Как правило, типичный веб-браузер сохраняет линейно только один стек истории.

В отличие от традиционной среды, характерной для браузера, приложения и веб-приложения имеют параллельные независимые истории, как и с вкладками. Пользователь может на одной вкладке перемещаться по нескольким интернет-страницам с достаточной глубиной просмотров, а затем переключиться на новую вкладку и снова вернуться назад. Кнопка возврата при этом относится не к предыдущей вкладке, а к предыдущим страницам, которые пользователь посетил в рамках той вкладки.

$ionicHistory обеспечивает такую параллельную архитектуру истории.

Методы

viewHistory()

Просмотр данных истории приложения, к которым относятся виды и истории переходов,
а также то, в каком порядке они осуществлялись и как были связаны между собой в пределах стека переходов.

• Возвращает:
  объект (object) Возвращает объект, содержащий данные истории видов приложения.

currentView()

Текущий вид приложения.

• Возвращает:
  объект (object) Возвращает текущий вид.

currentHistoryId()

ID стека истории, который является родительским контейнером текущего вида.

• Возвращает:
  строку (string) Возвращает ID текущей истории.

currentTitle([val])

Получает и устанавливает заголовок текущего вида.

• Возвращает:
  строку (string) Возвращает заголовок текущего вида.

backView()

Возвращает вид, который был до текущего вида в стеке истории.
Если пользователь осуществлял навигацию из Вида A в Вид B, то Вид A должен быть предыдущим видом, а
вид B будет текущим видом.

• Возвращает:
  объект(object) Возвращает предыдущий вид.

backTitle()

Получает заголовок предыдущего вида.

• Возвращает:
  строку (string) Возвращает заголовок предыдущего вида.

forwardView()

Возвращает вид, который был перед текущим видом в стеке истории.
Следующий вид существовал бы при условии, если бы пользователь перешел от Вида A к Виду B, а затем переместился обратно к Виду A. В этой точке Вид B был бы следующим видом, а Вид A был бы текущим видом.

• Возвращает:
  объект (object) Возвращает следующий вид.

currentStateName()

Возвращает имя текущего состояния.

• Возвращает:
  строку (string)

goBack([backCount])

Перемещает приложение к предыдущему виду, если он существует.

clearHistory()

Очищает всю историю приложения кроме истории для текущего вида.

clearCache()

Убирает из кэша все виды в рамках каждого ionNavView.
Это убирает элемент вида из DOM, и также разрушает его область видимости.

• Возвращает:
  обещание (promise)

nextViewOptions()

Задает опции для следующего вида. Этот метод может быть полезен, когда нужно
принудительно обойти параметры вида/перехода, назначенные по умолчанию, прямо перед тем, как произойдет переход вида. Например, директива menuClose использует данный метод внутренним образом, чтобы гарантировать, что анимированный переход вида не произойдет в тот момент, когда открыто боковое меню. Также она
устанавливает следующий вид как корневой в своем стеке истории. После перехода эти опции снова сводятся к неопределенному значению.

Доступные опции:

• disableAnimate: Не делать анимацию для следующего перехода.
• disableBack: Следующий вид должен забыть свой предыдущий вид и установить его на пустое значение.
• historyRoot: Следующий вид должен стать корневым (основным) видом в стеке истории.

$ionicHistory.nextViewOptions({
  disableAnimate: true,
  disableBack: true
});

Платформа

$ionicPlatform

Angular-абстракция  ionic.Platform.

Используется для детектирования текущей платформы, а также выполнения таких действий, как подавление
Android-кнопки "Назад" в PhoneGap/Cordova.

Методы

onHardwareBackButton(callback)

В некоторых платформах есть аппаратная кнопка возврата, и это один из способов
привязки к данной кнопке.

offHardwareBackButton(callback)

Убирает слушателя событий для кнопки возврата.

registerBackButtonAction(callback, priority, [actionId])

Регистрирует действие аппаратной кнопки возврата. Только одно действие будет выполняться,
когда произведен клик кнопкой "Назад", поэтому данный метод решает, какое из
зарегистрированных действий кнопки возврата имеет самый высокий приоритет.

Например, если список действий (Action Sheet) показывает, что кнопка возврата должна
закрывать список, но при этом не должно быть перехода обратно к виду страницы на экране
или не должно закрываться модальное окно, которое может быть в тот момент открыто.

Приоритеты существующих привязок кнопки возврата могут быть следующими:
Возврат к предыдущему виду = 100
Закрытие бокового меню = 150
Закрытие модального окна = 200
Закрытие списка действий (Action Sheet) = 300
Закрытие всплывающего окна = 400
Прекращение загрузки оверлея (overlay) = 500

Ваше действие кнопки возврата будет подавлять каждое из указанных выше действий,
приоритет которых ниже приоритета, который вами задан. Например,
действие с назначенным приоритетом 101 будет подавлять "возврат к
предыдущему виду", но только это, а не какое-то другое действие.

• Возвращает:
  function Функция, которая при вызове разрегистрирует
  это действие backButtonAction.

on(type, callback)

Добавляет слушатели событий Cordova, такие как pause, resume, volumedownbutton, batterylow,
offline и т.д. Более подробную информацию о типах событий можно найти в
Документации по событию Cordova.

• Возвращает:
  function  Возвращает функцию разрегистрации, для того чтобы убрать слушатель события.

ready([callback])

Запускает обратный вызов (callback), как только устройство готово,
или сразу же, если устройство уже готово.

• Возвращает:
  promise  Обещание, которое разрешено, когда устройство готово.

Вспомогательный экран

$ionicPopover

Смежная тема:  контроллер ionicPopover.

Вспомогательный экран (popover) - это вид, который всплывает над контентом приложения. Вспомогательные экраны обеспечивают легкий способ представления или сбора информации от пользователя.
Обычно они используются в следующих ситуациях:

• При показе более развернутой информации о текущем виде
• При выборе часто используемого инструмента или конфигурации
• При представлении списка действий, которые должны выполняться внутри одного из ваших видов

Поместите контент вспомогательного экрана внутрь элемента <ion-popover-view>.

Применение

<p>
  <button ng-click="openPopover($event)">Open Popover</button>
</p>

<script id="my-popover.html" type="text/ng-template">
  <ion-popover-view>
    <ion-header-bar>
      <h1 class="title">My Popover Title</h1>
    </ion-header-bar>
    <ion-content>
      Hello!
    </ion-content>
  </ion-popover-view>
</script>

angular.module('testApp', ['ionic'])
.controller('MyController', function($scope, $ionicPopover) {

  // .fromTemplate() method
  var template = '<ion-popover-view><ion-header-bar> <h1 class="title">My Popover Title</h1> </ion-header-bar> <ion-content> Hello! </ion-content></ion-popover-view>';

  $scope.popover = $ionicPopover.fromTemplate(template, {
    scope: $scope
  });

  // .fromTemplateUrl() method
  $ionicPopover.fromTemplateUrl('my-popover.html', {
    scope: $scope
  }).then(function(popover) {
    $scope.popover = popover;
  });


  $scope.openPopover = function($event) {
    $scope.popover.show($event);
  };
  $scope.closePopover = function() {
    $scope.popover.hide();
  };
  //Cleanup the popover when we're done with it!
  $scope.$on('$destroy', function() {
    $scope.popover.remove();
  });
  // Execute action on hide popover
  $scope.$on('popover.hidden', function() {
    // Execute action
  });
  // Execute action on remove popover
  $scope.$on('popover.removed', function() {
    // Execute action
  });
});

Методы

fromTemplate(templateString, options)

• Возвращает:
  object  Экземпляр ionicPopover
  контроллера (ionicPopover построен поверх $ionicPopover).

fromTemplateUrl(templateUrl, options)

• Возвращает:
  promise  Обещание, которое будет разрешено с экземпляром
  контроллера ionicPopover (ionicPopover построен поверх $ionicPopover).

ionicPopover

Реализуется сервисом $ionicPopover.

После окончания работы с каждым вспомогательным экраном не забудьте вызвать remove(),
чтобы провести очистку и избежать утечек памяти.

Примечание: вспомогательный экран будет транслировать события ‘popover.shown’, ‘popover.hidden’ и ‘popover.removed’ из
генерируемой области видимости в себя в качестве аргумента события. Оба события - и popover.removed, и popover.hidden
вызываются, когда вспомогательный экран убран.

Методы

initialize(options)

Создает новый экземпляр контроллера вспомогательного экрана.

show($event)

Отображает этот экземпляр вспомогательного экрана.

• Возвращает:
  promise Обещание, которое разрешено, когда заканчивается анимация, сопровождающая сворачивание вспомогательного экрана.

hide()

Скрывает этот экземпляр вспомогательного экрана.

• Возвращает:
  promise  Обещание, которое разрешено, когда заканчивается анимация, сопровождающая раскрытие вспомогательного экрана.

remove()

Убирает этот экземпляр вспомогательного экрана из дерева DOM и выполняет очистку.

• Возвращает:
  promise  Обещание, которое разрешено, когда заканчивается анимация, сопровождающая раскрытие вспомогательного экрана.

isShown()

• Возвращает:
  boolean  Определяет, отображается ли в текущий момент данный вспомогательный экран.

Всплывающее окно

$ionicPopup

Система всплывающих окон имеет поддержку более гибких версий встроенных функций  alert(),prompt(),
и  confirm() , к которым уже привыкли пользователи. Но в добавок с их помощью всплывающие окна
будут иметь полностью настраиваемый контент и внешний вид.

Вводу можно присвоить атрибут  autofocus , тогда поле ввода будет автоматически в фокусе, когда
впервые будет отображаться всплывающее окно. Однако в зависимости от определенных сценариев использования use-cases это может привести к проблемам с
системой tap/click, поэтому Ionic предпочитает использовать атрибут  autofocus 
в качестве настраиваемой функции, а не предполагающейся сразу по умолчанию.

Применение

Несколько основных примеров, информацию о всех доступных опциях смотрите ниже.

angular.module('mySuperApp', ['ionic'])
.controller('PopupCtrl',function($scope, $ionicPopup, $timeout) {

// Triggered on a button click, or some other target
$scope.showPopup = function() {
  $scope.data = {};

  // An elaborate, custom popup
  var myPopup = $ionicPopup.show({
    template: '<input type="password" ng-model="data.wifi">',
    title: 'Enter Wi-Fi Password',
    subTitle: 'Please use normal things',
    scope: $scope,
    buttons: [
      { text: 'Cancel' },
      {
        text: '<b>Save</b>',
        type: 'button-positive',
        onTap: function(e) {
          if (!$scope.data.wifi) {
            //don't allow the user to close unless he enters wifi password
            e.preventDefault();
          } else {
            return $scope.data.wifi;
          }
        }
      }
    ]
  });

  myPopup.then(function(res) {
    console.log('Tapped!', res);
  });

  $timeout(function() {
     myPopup.close(); //close the popup after 3 seconds for some reason
  }, 3000);
 };

 // A confirm dialog
 $scope.showConfirm = function() {
   var confirmPopup = $ionicPopup.confirm({
     title: 'Consume Ice Cream',
     template: 'Are you sure you want to eat this ice cream?'
   });

   confirmPopup.then(function(res) {
     if(res) {
       console.log('You are sure');
     } else {
       console.log('You are not sure');
     }
   });
 };

 // An alert dialog
 $scope.showAlert = function() {
   var alertPopup = $ionicPopup.alert({
     title: 'Don\'t eat that!',
     template: 'It might taste good'
   });

   alertPopup.then(function(res) {
     console.log('Thank you for not eating my delicious ice cream cone');
   });
 };
});

Методы

show(options)

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

Сложное всплывающее окно имеет массив  кнопок, у каждой кнопки имеется  текстовое поле  и  тип
в дополнение к функции onTap. Функция onTap вызывается, когда нажата соответствующая кнопка всплывающего окна. По умолчанию данная функция закроет окно и обещание будет успешно завершено - будет разрешено его значение возврата. Если вы хотите сделать так, чтобы заданное по умолчанию действие не произошло, и после нажатия на кнопку всплывающее окно оставалось открытым, поставьте вызовevent.preventDefault(), который будет передаваться при наступлении события (касания кнопки). Подробная информация дана ниже.

• Возвращает:
  object  Обещание, которое разрешено, когда всплывающее окно закрыто. Имеет дополнительную функцию
  close, которая может использоваться для того чтобы программным способом закрыть всплывающее окно.

alert(options)

Отображает простое всплывающее окно с сообщением и одной кнопкой, которую пользователь может
тапнуть, чтобы закрыть окно.

• Возвращает:
  object  Обещание, которое разрешено, когда всплывающее окно закрыто. Имеет дополнительную
  функцию  close, которая может быть вызвана с помощью любого значения, для того чтобы программным способом закрыть всплывающее окно этим самым значением.

confirm(options)

Отображает простое всплывающее окно подтверждения кнопкой Cancel и OK.

Разрешает обещание при установленном параметре "true", если пользователь нажимает кнопку "OK", и "false", если
пользователь нажимает кнопку "Cancel".

• Возвращает:
  object  Обещание, которое разрешено, когда всплывающее окно закрыто. Имеет дополнительную
  функцию  close, которая может быть вызвана с помощью любого значения, чтобы программным образом закрыть всплывающее окно этим значением.

prompt(options)

Отображает простое всплывающее окно-подсказку, в котором есть такие элементы, как поле ввода, кнопки OK и Cancel.
Разрешает обещание с помощью значения ввода, если пользователь нажимает "OK", и неопределенным значением (udefined), если пользователь нажимает "Cancel".

 $ionicPopup.prompt({
   title: 'Password Check',
   template: 'Enter your secret password',
   inputType: 'password',
   inputPlaceholder: 'Your password'
 }).then(function(res) {
   console.log('Your password is', res);
 });

• Возвращает:
  object  Обещание, которое разрешено, когда всплывающее окно закрыто. Имеет дополнительную
  функцию close, которая может быть вызвана любым значением для того, чтобы программным способом закрыть всплывающее окно с помощью данного значения.

Прокрутка

ion-scroll

Delegate: $ionicScrollDelegate

Создает контейнер с возможностью прокрутки для всего содержимого, которое будет находиться внутри него.

Применение

Основное применение:

<ion-scroll zooming="true" direction="xy" style="width: 500px; height: 500px">
  <div style="width: 5000px; height: 5000px; background: url('https://upload.wikimedia.org/wikipedia/commons/a/ad/Europe_geological_map-en.jpg') repeat"></div>
 </ion-scroll>

Обратите внимание на этот факт: важно задать высоту окна просмотра, так же как и высоту
контента, который будет находиться внутри этого окна, чтобы была возможность прокрутки. Этот элемент позволяет полностью контролировать зоны прокрутки.

Если же вам нужно, чтобы зона прокрутки была только для контента, расположенного по центру, используйте вместо этого  ionContent .

API

ion-infinite-scroll

Дочерний элемент ionContent или ionScroll

Директива ionInfiniteScroll позволяет вызывать функцию каждый раз,
когда пользователь достигает нижней части страницы или находится рядом с нижней частью страницы.

Выражение, которое вы передаете для on-infinite , вызывается, когда пользователь
прокрутил экран на большую величину, чем  distance  до нижней границы контента. Как только on-infinite
закончит загрузку новых данных, он должен транслировать событие scroll.infiniteScrollComplete
из вашего контроллера (см. пример, данный ниже).

Применение

<ion-content ng-controller="MyController">
  <ion-list>
  ....
  ....
  </ion-list>

  <ion-infinite-scroll
    on-infinite="loadMore()"
    distance="1%">
  </ion-infinite-scroll>
</ion-content>

function MyController($scope, $http) {
  $scope.items = [];
  $scope.loadMore = function() {
    $http.get('/more-items').success(function(items) {
      useItems(items);
      $scope.$broadcast('scroll.infiniteScrollComplete');
    });
  };

  $scope.$on('$stateChangeSuccess', function() {
    $scope.loadMore();
  });
}

Легкий способ прекратить бесконечную прокрутку, если больше нет данных для загрузки, это
воспользоваться директивой  ng-if , имеющейся в Angular:

<ion-infinite-scroll
  ng-if="moreDataCanBeLoaded()"
  icon="ion-loading-c"
  on-infinite="loadMoreData()">
</ion-infinite-scroll>

API

$ionicScrollDelegate

Делегирует управление элементом scrollViews (созданным директивами ionContent и ionScroll ).

Вызываемые напрямую методы сервиса $ionicScrollDelegate будут управлять всеми видами прокрутки. Используйте метод $getByHandle для управления определенными видами прокрутки (scrollViews).

Применение

<body ng-controller="MainCtrl">
  <ion-content>
    <button ng-click="scrollTop()">Scroll to Top!</button>
  </ion-content>
</body>

function MainCtrl($scope, $ionicScrollDelegate) {
  $scope.scrollTop = function() {
    $ionicScrollDelegate.scrollTop();
  };
}

Пример расширенного применения, когда имеются две зоны прокрутки и для более точного управления используется delegate-handle

<body ng-controller="MainCtrl">
  <ion-content delegate-handle="mainScroll">
    <button ng-click="scrollMainToTop()">
      Scroll content to top!
    </button>
    <ion-scroll delegate-handle="small" style="height: 100px;">
      <button ng-click="scrollSmallToTop()">
        Scroll small area to top!
      </button>
    </ion-scroll>
  </ion-content>
</body>

function MainCtrl($scope, $ionicScrollDelegate) {
  $scope.scrollMainToTop = function() {
    $ionicScrollDelegate.$getByHandle('mainScroll').scrollTop();
  };
  $scope.scrollSmallToTop = function() {
    $ionicScrollDelegate.$getByHandle('small').scrollTop();
  };
}

Методы

resize()

Сообщает scrollView о перерасчете размера своего контейнера.

scrollTop([shouldAnimate])

scrollBottom([shouldAnimate])

scrollTo(left, top, [shouldAnimate])

scrollBy(left, top, [shouldAnimate])

zoomTo(level, [animate], [originLeft], [originTop])

zoomBy(factor, [animate], [originLeft], [originTop])

getScrollPosition()

• Возвращает:
  object  Позиция прокрутки этого вида, имеющая следующие свойства:
• {number} left Расстояние слева, на которое пользователь прокрутил контент (начинается от 0).
• {number} top  Расстояние от верхней границы, на которое пользователь прокрутил контент (начинается от 0).

anchorScroll([shouldAnimate])

Дает команду ScrollView прокрутить элемент с ID, который
соответствует window.location.hash.

Если подходящий элемент не найден, будет выполнена прокрутка до самой верхней позиции.

freezeScroll([shouldFreeze])

Не позволяет этому виду прокручиваться по параметрам x или y.

• Возвращает:
  boolean  Определяет, запрещен этому Scroll View режим прокрутки или нет.

freezeAllScrolls([shouldFreeze])

Не разрешает любому из Scroll View приложения прокручиваться по параметрам x или y.

getScrollView()

• Возвращает:
  object  Данный ScrollView ассоциируется с этим делегатом.

$getByHandle(handle)

• Возвращает:
  delegateInstance Экземпляр делегата, который управляет только
  видами прокрутки ScrollViews с помощью  delegate-handle  в соответствие с данным обработчиком.

Пример: $ionicScrollDelegate.$getByHandle('my-handle').scrollTop();

Боковые меню

ion-side-menus

ion-side-menus 
Delegate: $ionicSideMenuDelegate

Элемент контейнера для бокового меню (боковых меню) и основного контента. Разрешает включение левого и/или правого бокового меню
с помощью перетаскивания зоны основного контента из стороны в сторону.

Чтобы автоматически закрыть открытое меню, вы можете добавить директиве атрибут menuClose .
Атрибут menu-close обычно добавляется к ссылкам и кнопкам в пределах ion-side-menu-content, так чтобы когда по элементу производится клик, открытое боковое меню закрылось бы автоматически.

Можно добавить в хедер переключатели в стиле “Burger Icon”, прописав директиве атрибут menuToggle.

Клик по такому переключателю будет открывать и закрывать боковое меню, как директива menu-close.
Боковое меню будет автоматически скрывать дочерние страницы, но такое поведение можно обойти с помощью
атрибута enable-menu-with-back-views, о котором упоминается ниже.

По умолчанию боковые меню скрыты под своим контентом боковых меню и могут быть открыты свайпом контента влево или вправо, или включением кнопки, отвечающей за функцию отображения бокового меню. К тому же, при добавлении
атрибута директивы exposeAsideWhen  элементу директивы ionSideMenu , боковое меню может получать инструкции о том,
"когда" меню должно раскрываться (быть всегда доступным для просмотра).

Для получения более подробной информации о боковых меню, см.:

• ionSideMenuContent
• ionSideMenu
• menuToggle
• menuClose
• exposeAsideWhen

Применение

Чтобы использовать боковые меню, добавьте родительский элемент <ion-side-menus>. Это охватит все страницы, у которых
есть боковое меню и которые имеют, по крайней мере, 2 дочерних элемента: 1 <ion-side-menu-content> для контента по центру и
еще одну или более директив <ion-side-menu> для каждого бокового меню (левого/правого), которые вы хотите разместить.

<ion-side-menus>
  
  <ion-side-menu side="left">
  </ion-side-menu>

  <ion-side-menu-content>
  
  </ion-side-menu-content>

  
  <ion-side-menu side="right">
  </ion-side-menu>

</ion-side-menus>

function ContentController($scope, $ionicSideMenuDelegate) {
  $scope.toggleLeft = function() {
    $ionicSideMenuDelegate.toggleLeft();
  };
}

API

ion-side-menu-content

Child of ionSideMenus

Контейнер для основного видимого контента, являющийся родственным одной или более директивам ionSideMenu 

Usage

<ion-side-menu-content
  edge-drag-threshold="true"
  drag-content="true">
</ion-side-menu-content>

Пример полного бокового меню можно посмотреть в документации ionSideMenus.

API

API

ion-side-menu

Child of ionSideMenus

Контейнер для бокового меню, являющийся родственным директиве ionSideMenuContent .

Usage

<ion-side-menu
  side="left"
  width="myWidthValue + 20"
  is-enabled="shouldLeftSideMenuBeEnabled()">
</ion-side-menu>

Пример полного бокового меню см. в документации ionSideMenus.

API

API

expose-aside-when

Child of ionSideMenus

Является обычным элементом для планшетного приложения, служит для того, чтобы скрывать меню при переходе в портретный режим отображения, но отображает то же самое меню с левой стороны, когда планшет повернут в ландшафтный режим отображения. Атрибут директивы  exposeAsideWhen, который может быть использован для выполнения точно такого же интерфейса.

По умолчанию боковые меню скрыты под своим контентом боковых меню и могут быть открыты свайпом контента влево или вправо, или включением кнопки, отвечающей за функцию отображения бокового меню. Однако при добавлении
атрибута директивы exposeAsideWhen элементу директивы  ionSideMenu , боковое меню может получать инструкции о том, "когда" меню должно раскрываться (быть всегда доступным для просмотра). Например, атрибут expose-aside-when="large" будет удерживать боковое меню в скрытом состоянии, когда ширина области просмотра будет менее  768px, но когда ширина области просмотра будет  768px и более, то меню будет отображаться всегда, и его нельзя будет открыть или закрыть, как это можно делать, если размер области просмотра будет меньше.

Использование  large в качестве значения атрибута является значением для ярлыка для (min-width:768px) , так как это самый распространенный use-case (сценарий использования). Однако для большей гибкости в качестве значения может быть добавлен любой действительный медиа-запрос, например, (min-width:600px); или даже несколько запросов, таких как (min-width:750px) и (max-width:1200px).

Usage

<ion-side-menus>
  
  <ion-side-menu-content>
  </ion-side-menu-content>

  
  <ion-side-menu expose-aside-when="large">
  </ion-side-menu>
</ion-side-menus>

Пример полного бокового меню см. в документации ionSideMenus .

menu-toggle

Переключает боковое меню на данную сторону.

Применение

Ниже дается пример связи внутри навигационной панели. Касание этой кнопки откроет данное боковое меню, повторное касание кнопки закроет его.

<ion-nav-bar>
  <ion-nav-buttons side="left">
   
   <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>
  <ion-nav-buttons side="right">
   
   <button menu-toggle="right" class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>
</ion-nav-bar>

Кнопка, скрытая на дочерних представлениях вида

По умолчанию кнопка переключения меню будет появляться только на корневой странице бокового меню. Перемещение к дочерним видам будет скрывать кнопку переключения меню. Их можно сделать видимыми на дочерних страницах, если установить атрибут enable-menu-with-back-views директивы ionSideMenus на значение "true".

<ion-side-menus enable-menu-with-back-views="true">

menu-close

menu-close  является атрибутом директивы, которая закрывает открытое в текущий момент боковое меню. Примите во внимание тот факт, что по умолчанию навигационные переходы между видами не будут сопровождаться анимацией, когда меню открыто. К тому же, эта директива заново установит стек истории входящего вида, делая новую страницу корневой в стеке истории. Это сделано для того чтобы продублировать пользовательский опыт в большинстве реализаций бокового меню, которые не должны отображать кнопку возврата в корне стека, а должны отображать только кнопку меню. Мы рекомендуем вам также использовать атрибут enable-menu-with-back-views="false" ionSideMenus , когда применяется директива menuClose.

Применение

Ниже дан пример связи, существующей внутри бокового меню. Тап по этой ссылке автоматически закроет открытое в данный момент меню.

<a menu-close href="#/home" class="item">Home</a>

Имейте в виду, что если ваше состояние назначения использует разрешение, и разрешение, происходящее асинхронно, занимает времени больше, чем стандартный переход (300 мс), вам нужно будет вручную установить nextViewOptions , как только ваше разрешение будет выполнено.

$ionicHistory.nextViewOptions({
 historyRoot: true,
 disableAnimate: true,
 expire: 300
});

$ionicSideMenuDelegate

Делегирует управление директиве ionSideMenus .

Вызываемые напрямую методы сервиса $ionicSideMenuDelegate будут управлять всеми боковыми меню. Используйте метод $getByHandle метод, используемый для управления указанными экземплярами ionSideMenus.

Применение

<body ng-controller="MainCtrl">
  <ion-side-menus>
    <ion-side-menu-content>
      Content!
      <button ng-click="toggleLeftSideMenu()">
        Toggle Left Side Menu
      </button>
    </ion-side-menu-content>
    <ion-side-menu side="left">
      Left Menu!
    <ion-side-menu>
  </ion-side-menus>
</body>

function MainCtrl($scope, $ionicSideMenuDelegate) {
  $scope.toggleLeftSideMenu = function() {
    $ionicSideMenuDelegate.toggleLeft();
  };
}

Методы

toggleLeft([isOpen])

Переключает на левостороннее меню (если оно существует).

toggleRight([isOpen])

Переключает на правостороннее меню (если оно существует).

getOpenRatio()

Получает коэффициент, определяющий размер открытого меню. Например, меню шириной 100, которое открыто в размере на 50 пикселей, получается открытым на 50% и вернет коэффициент, равный 0.5.

• Возвращает:
  float  0, если ничего не открыто; между 0 и 1, если открыто/открывается левое меню;
  и между 0 и -1, если открыто/открывается правое меню.

isOpen()

• Возвращает:
  boolean  Определяет, какое меню открыто в данный момент - левое или правое.

isOpenLeft()

• Возвращает:
  boolean  Определяет, открыто ли в данный момент левое меню.

isOpenRight()

• Возвращает:
  boolean  Определяет, открыто ли в данный момент правое меню.

canDragContent([canDrag])

• Возвращает:
  boolean  Определяет, можно ли перетаскивать контент для открытия боковых меню.

edgeDragThreshold(value)

• Возвращает:
  boolean  Определяет, может ни быть начато перетаскивание только в пределах границ, определяемых краями экрана.

$getByHandle(handle)

• Возвращает:
  delegateInstance Экземпляр делегата, который управляет только
  директивами ionSideMenus приведением  delegate-handle  в соответствие
  данным обработчиком.

Пример: $ionicSideMenuDelegate.$getByHandle('my-handle').toggleLeft();

Слайд-бокс

ion-slides

ion-slides 
Delegate: $ionicSlideBoxDelegate

Новая версия Ionic Slide Box, базирующаяся на Swiper виджет от idangerous.

Применение

<ion-slides  options="options" slider="data.slider">
  <ion-slide-page>
    <div class="box blue"><h1>BLUE</h1></div>
  </ion-slide-page>
  <ion-slide-page>
    <div class="box yellow"><h1>YELLOW</h1></div>
  </ion-slide-page>
  <ion-slide-page>
    <div class="box pink"><h1>PINK</h1></div>
  </ion-slide-page>
</ion-slides>

$scope.options = {
  loop: false,
  effect: fade,
  speed: 500,
}
$scope.data = {};
$scope.$watch('data.slider', function(nv, ov) {
  $scope.slider = $scope.data.slider;
})

ion-slide-box

Устаревший API

будет удален в следующем релизе Ionic, на смену придет новый компонент ion-slides. Не зависит от внутреннего поведения этого виджета.

Применение

<ion-slide-box on-slide-changed="slideHasChanged($index)">
  <ion-slide>
    <div class="box blue"><h1>BLUE</h1></div>
  </ion-slide>
  <ion-slide>
    <div class="box yellow"><h1>YELLOW</h1></div>
  </ion-slide>
  <ion-slide>
    <div class="box pink"><h1>PINK</h1></div>
  </ion-slide>
</ion-slide-box>

API

ion-slide

Дочерний элемент ionSlideBox

Отображает слайд внутри слайд-бокса.

Большее количество примеров находится в разделе ionSlideBox.

Применение

<ion-slide-box>
  <ion-slide>1</ion-slide>
  <ion-slide>2</ion-slide>
</ion-slide-box>

$ionicSlideBoxDelegate

Делегирует, что управляет директивой ionSlideBox .

Вызываемые напрямую методы сервиса $ionicSlideBoxDelegate будут управлять всеми слайд-боксами. Используйте метод $getByHandle метод, управляющий указанными экземплярами слайд-бокса.

Применение

<ion-view>
  <ion-slide-box>
    <ion-slide>
      <div class="box blue">
        <button ng-click="nextSlide()">Next slide!</button>
      </div>
    </ion-slide>
    <ion-slide>
      <div class="box red">
        Slide 2!
      </div>
    </ion-slide>
  </ion-slide-box>
</ion-view>

function MyCtrl($scope, $ionicSlideBoxDelegate) {
  $scope.nextSlide = function() {
    $ionicSlideBoxDelegate.next();
  }
}

Методы

Спиннер

ion-spinner

Директива ionSpinner предоставляет целый набор анимированных вращающихся элементов (спиннеров).
Вращающиеся иконки позволяют вам организовать с пользователями что-то типа обратной связи, чтобы они видели, что приложение работает/что-то обрабатывает/загружает. Вы можете отображать прохождение какого угодно процесса внутри приложения с помощью вращающейся иконки.
По умолчанию функция ionRefresher  использует этот спиннер, а не вращающиеся шрифтовые иконки (которые раньше были в составе ionicons).
Шрифтовые иконки прекрасно смотрятся вместе с простой графикой или с изображениями разных канцелярских предметов, но они не подходят для анимации более продвинутого уровня, поэтому Ionic теперь использует SVG-графику.

Ionic предлагает 10 готовых спиннеров. По умолчанию будет использоваться тот, который лучше всего подходит для той платформы, на которой он должен запускаться. Директива ionSpinner  динамически создает требуемый SVG-элемент, который позволяет фреймворку Ionic задействовать все десять анимированных SVG, чтобы размер не превышал 3 Кбайт.

В каждом вращающемся элементе (спиннере) используется анимация SVG (SMIL). Но для Android-спиннера также используется JavaScript.
Поэтому спиннеры работают и на  Android 4.0-4.3. Кроме того, каждый спиннер может быть стилизован с помощью CSS
и отмасштабирован до любого размера.

Применение

Применение следующего кода будет запускать дефолтный спиннер для платформы, на которой ему нужно будет запускаться. Если это не iOS и не Android, то по умолчанию будет использоваться ios.

<ion-spinner></ion-spinner>

Установкой атрибута icon  вы можете точно определить, какой спиннер нужно использовать, не обращая внимания на
платформу.

<ion-spinner icon="spiral"></ion-spinner>

Цвета

Как и в случае со многими другими компонентами Ionic, можно менять стиль спиннеров с
помощью стандартных кодов цвета, соответствующих соглашению о назначении имен. Например:

<ion-spinner class="spinner-energized"></ion-spinner>

Создание стиля SVG с помощью CSS

Есть одна очень приятная черта в SVG - это то, что можно менять стиль с помощью CSS! Некоторые свойства имеют разные названия, например, SVG использует термин stroke вместо border и fill вместо background-color.

.spinner svg {
  width: 28px;
  height: 28px;
  stroke: #444;
  fill: #444;
}

Вкладки

ion-tabs

Делает возможным использование интерфейса с вкладками и панелью вкладок, а также устанавливает "страницы", которые будут отображаться в виде вкладок.

Назначает элементу любой  tabs class , чтобы определить, как он будет выглядеть и ощущаться.

В iOS вкладки появятся в нижней части экрана. В Android вкладки появятся в верхней части экрана под навигационной панелью. Должно быть соответствие дизайну каждой ОС, но можно менять конфигурацию с помощью $ionicConfigProvider.

Более подробную информацию о вкладках см. в документации в разделе ionTab . 

individual tabs.

Примечание: не помещайте ion-tabs внутри элемента ion-content; есть информация, что это может
вызвать ошибку CSS.

Применение

<ion-tabs class="tabs-positive tabs-icon-top">

  <ion-tab title="Home" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
    
  </ion-tab>

  <ion-tab title="About" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">
    
  </ion-tab>

  <ion-tab title="Settings" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">
    
  </ion-tab>

</ion-tabs>

API

ion-tab

Содержит контент вкладки. Контент существует, пока выбрана данная вкладка.

Каждая ionTab имеет свою историю видов представления.

Применение

<ion-tab
  title="Tab!"
  icon="my-icon"
  href="#/tab/tab-link"
  on-select="onTabSelected()"
  on-deselect="onTabDeselected()">
</ion-tab>

Полностью рабочий пример панели вкладок можно посмотреть в документации, в разделе ionTabs .

API

$ionicTabsDelegate

Делегат для управления директивой ionTabs .

Вызываемые напрямую методы сервиса $ionicTabsDelegate будут управлять всеми директивами вкладок ionTabs.
директивы. Используйте метод $getByHandle
чтобы управлять указанными экземплярами ionList.

Применение

<body ng-controller="MyCtrl">
  <ion-tabs>

    <ion-tab title="Tab 1">
      Hello tab 1!
      <button ng-click="selectTabWithIndex(1)">Select tab 2!</button>
    </ion-tab>
    <ion-tab title="Tab 2">Hello tab 2!</ion-tab>

  </ion-tabs>
</body>

function MyCtrl($scope, $ionicTabsDelegate) {
  $scope.selectTabWithIndex = function(index) {
    $ionicTabsDelegate.select(index);
  }
}

Методы

select(index)

Выберите вкладку, подходящую к данному индексу.

selectedIndex()

• Возвращает:
  number  Индекс выбранной вкладки, или -1.

showBar(show)

Set/get, определяющие отображается ionTabs или нет.

• Возвращает:
  boolean  Определяет, отображать строку или нет.

$getByHandle(handle)

• Возвращает:
  delegateInstance Экземпляр делегата, который управляет только
  директивами ionTabs приведением delegate-handle в соответствие с
  данным обработчиком.

Пример: $ionicTabsDelegate.$getByHandle('my-handle').select(0);

Тап и клик

тап (tap)

На сенсорных устройствах, таких как смартфоны и планшеты, некоторые браузеры делают задержку, равную 300 мс, от момента, когда пользователь прекращает касаться дисплея до момента, когда браузер выполняет клик. Эта задержка была изначально введена для того, чтобы браузер мог понять, хочет ли пользователь детализировать изображение с помощью двойного клика по веб-странице. Обычно браузер ждет приблизительно 300 мс, чтобы определить,
будет ли пользователь делать двойной тап или же он коснулся экрана один раз.

Ionic (в своем виде "из коробки") автоматически убирает задержку в 300 мс, чтобы Ionic-приложения
чувствовали себя более "по-нативному". В результате, другие решения, такие как
fastclick и в Angular
ngTouch не должны использоваться, чтобы не вызывать конфликтов.

Некоторые браузеры уже умеют убирать задержку с помощью настроек, таких как свойство CSS
touch-events: none или с помощью особых значений метатегов области просмотра. Однако каждый из этих
браузеров до сих пор обрабатывает клики по-разному, например, определяет, когда отменить или прекратить событие
(такое как прокрутка, когда целью является кнопка или долгое удерживание кнопки).
Для браузеров, в которых уже нет задержки в 300 мс, рассмотрите как вариант систему тапов Ionic.
Она может привести в норму то, как будут обрабатываться клики на разных устройствах - то есть, будет ожидаться ответ,
неважно, какое это устройство, платформа или версия. К тому же, Ionic будет предотвращать
 "призрачные клики" (ghostclicks), которые случаются даже в тех браузерах, в которых убрана задержка.

В некоторых случаях третьесторонние библиотеки могут также работать, пока не будет касаний - touch events, которые могут
вступать в конфликт с tap-системой. Например, mapping-библиотеки, такие как Google или Leaflet Maps часто
запускают систему обнаружения касания, которая конфликтует с tap-системой Ionic.

Отключение tap-системы

Чтобы отключить тап для какого-то элемента и всего его дочерних элементов,
добавьте атрибут data-tap-disabled="true".

<div data-tap-disabled="true">
    <div id="google-map"></div>
</div>

Дополнительная информация:

• Тап Ionic работает с JavaScript-прокруткой Ionic.
• Элементы могут приходить и уходить из DOM, а тап Ionic не будет продолжать добавлять и убирать
  слушателей.
• Не будет задержки тапа “tap delay” после первого "тапа" (вы можете "тапать" по экрану так быстро, как вы этого хотите, все касания будут считаться кликами)
• Слушатели минимальных событий добавляются только в документ
• Корректный фокус для каждого типа ввода ((select, textearea, range) на каждой платформе/устройстве
• Корректно отображает и прячет виртуальную клавиатуру для каждой платформы/устройства
• Работает с метками окружающих входных значений
• Не игнорирует клик, если пользователь сдвигает указатель мыши слишком далеко
• Добавляет и убирает "активированный" css-класс
• Многократное  модульное тестирование  для каждого сценария

Utility (Сервисная программа)

$ionicConfigProvider

$ionicConfigProvider.views.maxCache(10);

$ionicConfigProvider.platform.android.views.maxCache(5);

var myApp = angular.module('reallyCoolApp', ['ionic']);

myApp.config(function($ionicConfigProvider) {
  $ionicConfigProvider.views.maxCache(5);

  // note that you can also chain configs
  $ionicConfigProvider.backButton.text('Go Back').icon('ion-chevron-left');
});