ionic-framework
Ionic AngularJSエクステンション
サーチ…
備考
Ionicには、さまざまなJavascript 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
});
Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow