イオンモデル
$ IONICMODAL
$ IONICMODALは、ユーザーのメインインターフェイスのコンテンツボックスを曖昧にする可能性があります。
インデックスファイルまたは他のファイルに次のコードを埋め込むことができます（自分のビジネスシナリオに従って内部のコードを変更できます）。
<script id = "my-modal.html" type = "text/ng-template"> <ion-modal-view> <ion-header-bar> <h1>私のモーダルタイトル</h1> </ion-header-bar> <ion-content> hello！</ion-content> </ion-modal-view>
次に、コントローラーに$ IONICMODALを注入できます。次に、作成したテンプレートを呼び出して、初期化操作を実行します。次のコードと同じように：
angular.module（ 'testapp'、['ionic']））。 modal;}）; $ scope.openmodal = function（）{$ scope.modal.show（）;}; $ scope.closemodal = function（）{$ scope.modal.hide（）;}; //モーダルのクリーンアップで、$ scope。 {$ scope.modal.remove（）;}）; //モーダル$ scope。$ on（ 'modal.hidden'、function（）{// execute action}）; //モーダル$ scopeでアクションを実行します。方法
fromtemplate（templatestring、options）
| パラメーター | タイプ | 詳細 |
|---|---|---|
| templatestring | 字符串 | テンプレートの文字列は、モデルのコンテンツとして機能します。 |
| オプション | 对象 | オプションはIonicModal＃初期化メソッドに渡されます。 |
fromtemplateurl（templateurl、options）
| パラメーター | タイプ | 詳細 |
|---|---|---|
| templateurl | 字符串 | テンプレートのURLをロードします。 |
| オプション | 对象 | IonicModal＃初期化メソッドを介してオブジェクトを渡します。 |
返品： Promise Object。 Promises Objectは、非同期プログラミングに統一されたインターフェイスを提供する目的で、CommonJSワーキンググループによって提案された仕様です。
IonicModal
$ ionicmodalサービスによってインスタンス化されました。
ヒント：各モジュールのクリアを完了するときは、メモリリークを避けるために、remove（）メソッドを呼び出すようにしてください。
注：モジュールは、「Modal.shown」と「Modal.hidden」を初期範囲から放送し、パラメーターとして渡します。
方法
初期化（オプション）
新しいモデルコントローラーの例を作成します。
| パラメーター | タイプ | 詳細 |
|---|---|---|
| オプション | 对象 | オプションオブジェクトには次のプロパティがあります。
|
見せる（）
モデルインスタンスを表示します
戻り値：モデルがアニメーションを完了した後に解析された約束のオブジェクトを約束します
隠れる（）
モデルを非表示にします。
戻り値：モデルがアニメーションを完了した後に解析された約束のオブジェクトを約束します
取り除く（）
モデルインスタンスをDOMから削除してクリーニングします。
戻り値：モデルがアニメーションを完了した後に解析された約束のオブジェクトを約束します
isshown（）
返品：モデルが表示されるかどうかを判断するために使用されるブール値。
例
HTMLコード
<html ng-app = "ionicapp"> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "initial-scale = 1、user-scalable = no、width = device-width"> <title> rookie Tutorial（runoob.com）</title> <リンク> < href = "http://www.runoob.com/static/ionic/css/ionic.min.css" rel = "styleSheet"> <script src = "http://www.runoob.com/static/ionic/js/ionic.bundle.min.min.js"> </</< ng-controller = "appctrl"> <ion-header-bar> <h1> contacts </h1> <div> <button ng-click = "modal.show（）"> </button> </div> </ion-header> <ion-content> <ion-list> <ion-list> <ion-repeat = "連絡先contacts "> {{contact.name}} </ion-item> </ion-list> </ion-content> <script id =" templates/modal.html "text/ng-template"> <ion-modal-view> <ion-header-bar> ng-click = "modal.hide（）"> cancel </button> </ion-header-bar> <ion-content> <div> <abow> <abol> <span> first name </span> <input ng-model = "newuser.firstname" type = "text"> </label> <ラベル> <ラスト< type = "text"> </label> <label> <span> email </span> <input ng-model = "newuser.email" type = "text"> </label> <button ng-click = "createcontact（newuser）"> create </button> </div> </ion-content> </ion-modal-view> </scrip> </</html>CSSコード
body {cursor：url（ 'http://www.runoob.com/try/demo_source/finger.png'）、auto;}JavaScriptコード
Angular.Module（ 'IonicApp'、['Ionic']）。コントローラー（ 'appctrl'、function（$ scope、$ ionicmodal）{$ scope.contacts = [{name： 'gordon freeman'}、{name： 'barney calhoun'}、{name： 'headcrab' lamar }、]; $ IONICMODAL.FROMTEMPLATEURL（ 'Templates/Modal.html'、{scope：$ scope}）。 }）; $ scope.modal.hide（）;};}）;完全なソースコード：
<html ng-app = "ionicApp"> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "initial-scale = 1、usermage-scale = 1、user-scalable = no、width = device-width"> <title> </title> <link href = "http://cdn.bootcss.com/ionic/1.0.1/css/ionic.min.css" rel = "styleSheet"> <script src = "http://cdn.bootcss.com/ionic/1.0.1/js/js/ionic.bundle.min.js {cursor：url（ 'http://ionicframework.com/img/finger.png'）、auto;} </style> <script> angular.module（ 'ionicapp'、['ionic']。 }、{name： 'barney calhoun'}、{name： 'lamarr the headcrab'}、]; $ ionicmodal.fromtemplateurl（ 'templates/modal.html'、{scope：$ scope}）。 $ scope.contacts.push（{name：u.firstname + '' + u.lastname}）; $ scope.modal.hide（）;};}）; </script> </head> <body ng-controller = "appctrl"> <ion-header-bar> ng-click = "modal.show（）"> </button> </div> </ion-header-bar> <ion-content> <ion-list> <ion-item ng-repeat = "連絡先"> {{contact.name}} </ion-item> </ion-list> </ion-content> </ion-content> </ion-content> </ion-content> type = "text/ng-template"> <ion-modal-view> <ion-header-bar> <h1> new Contact </h1> <button ng-click = "modal.hide（）"> cancel </button> </ion-header-bar> <ion-content> <div> <put/span </span> <putin type = "text"> </label> <label> <span>姓</span> <input ng-model = "newuser.lastname" type = "text"> </label> <label> <span> <span> <input ng-model = "newuser.email"タイプ= "テキスト"> </</<ボタンng-click = "createContact（newuser）"> create </button> </div> </ion-content> </ion-modal-view> </script> </body> </html>