イオン-Javascriptモーダル
Ionicモーダルがアクティブになると、コンテンツペインが通常のコンテンツの上に表示されます。 モーダルは基本的に、より多くの機能を備えた大きなポップアップです。 モーダルはデフォルトで画面全体をカバーしますが、必要に応じて最適化できます。
モーダルの使用
Ionicでモーダルを実装するには2つの方法があります。 1つの方法は、個別のテンプレートを追加することであり、もう1つは、 script タグ内の通常のHTMLファイルの上に追加することです。 最初に行う必要があるのは、角度依存性注入を使用してモーダルをコントローラーに接続することです。 次に、モーダルを作成する必要があります。 スコープを渡し、モーダルにアニメーションを追加します。
その後、モーダルを開く、閉じる、破棄する関数を作成します。 最後の2つの関数は、モーダルが非表示または削除された場合にトリガーされるコードを記述できる場所に配置されます。 機能をトリガーしたくない場合、モーダルが削除または非表示になったときに、最後の2つの機能を削除できます。
コントローラコード
HTMLコード
最後の例で示した方法は、 script タグが既存のHTMLファイル内のモーダルのコンテナとして使用される場合です。
2番目の方法は、 templates フォルダー内に新しいテンプレートファイルを作成することです。 前の例と同じコードを使用しますが、 script タグを削除し、コントローラーの fromTemplateUrl を変更して、モーダルを新規作成テンプレートに接続する必要があります。
コントローラコード
HTMLコード
Ionicモーダルを使用する3番目の方法は、HTMLをインラインで挿入することです。 fromTemplateUrl の代わりに fromTemplate 関数を使用します。
コントローラコード
3つの例はすべて同じ効果があります。 * $ ionicModal.show()*をトリガーしてモーダルを開くボタンを作成します。
HTMLコード
モーダルを開くと、モーダルを閉じるために使用されるボタンが含まれます。 このボタンをHTMLテンプレートに作成しました。
モーダル最適化には他のオプションもあります。 scope と animation の使用方法は既に示しました。 次の表に、他のオプションを示します。
Option | Type | Detail |
---|---|---|
focusFirstInput | boolean | It will auto focus first input of the modal. |
backdropClickToClose | boolean | It will enable closing the modal when backdrop is tapped. Default value is true. |
hardwareBackButtonClose | boolean | It will enable closing the modal when hardware back button is clicked. Default value is true. |