ionic-framework
Ionic AngularJSエクステンション

備考

フォーム入力

イオン入力は通常のHTML入力と変わりはありませんが、異なるスタイルになっており、指示として使用されます。また、Ionicアプリで通常のHTML入力を使用することもできます。ここでは、Ionicがすぐに使える基本的な例をいくつか紹介します。

チェックボックス：

<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
});