推奨読書:AngularJSモーダルダイアログボックスの詳細な説明
$ Modalは、モーダルウィンドウをすばやく作成し、ページ、コントローラーの一部を作成し、それらを関連付けることができるサービスです。
$ Modalには1つのメソッドのみが開いています(オプション)
TemplateUrl:モーダルウィンドウのアドレス
テンプレート:HTMLタグを表示するために使用されます
範囲:モーダルスコープでコンテンツを使用します(実際、$ MODALは現在のスコープのサブスコープを作成します)デフォルトでは$ Rootscopeです
コントローラー:$ modalで指定されたコントローラーは、$ scopeを初期化します。これは$ modalinstanceで注入できます
Resolve:メンバーを定義し、$ Modalで指定されたコントローラーに渡します。これは、ルートの再ルーブプロパティに相当します。オブジェクトオブジェクトを渡す必要がある場合は、angular.copy()を使用する必要があります
背景:背景、許容値を制御:true(default)、false(no no no no no background)、 "static" - 背景が存在しますが、モーダルウィンドウの外側をクリックすると、モーダルウィンドウは閉じません
キーボード:ESCが押されたら、モーダルダイアログボックスが閉じられているかどうか、デフォルトでtureに
WindowClass:クラスを指定し、モーダルウィンドウに追加します
オープンメソッドはモーダルインスタンスを返します。これには次のプロパティがあります
閉じる(結果):モーダルウィンドウを閉じて結果を渡します
却下(理由):モーダル方法を元に戻し、理由を渡します
結果:モーダルウィンドウが閉じられたり取り消されたりしたときに渡される契約
オープン:契約、モーダルウィンドウが開いてコンテンツがロードされたときに変数が通過します
さらに、$ ModAlinStanceは2つの方法を拡張します$ close(result)、$ dismiss(理由)。
HTML
<!doctype html> <html ng-app = "modaldemo"> <head> <title> </title> <link href = "lib/bootstrap/css/bootstrap.min.css" lel = "styleSheet"> <script src = "lib/angular.min.js"> src = "lib/bootstrap-gh-pages/ui-bootstrap-tpls -... min.js"> </script> <script src = "lib/angular/in/angular-locale_zh-cn.js"> </script> </head> <body> <div ng-controller = "modaldemoctrl"> ng-tmplate = "> <"> id = "mymodalcontent.html"> <div> <h>私はモーダルです!</h> </h> </div> <div> <ul> <li ng-repeat = "アイテムのアイテム"> <a ng-click = "selected.item = item" </div> <div> <button ng-click = "ok()"> ok </button> <button ng-click = "cancel()"> cancel </button> </div> </script> <button ng-click = "open()"> open me! var modaldemoctrl = function($ scope、$ modal、$ log){$ scope.items = ['item'、 'item'、 'item']; $ scope.open = function(){var modalinstance = $ modal.open({templateurl: 'mymodalcontent.html'、controller:modalinstancectrl、resolve:{item:function(){return $ scope.items;}}}); modalinstance.opened.then(function(){//モーダルウィンドウが開いた後に実行された関数。 modalinstance.result.then(function(result){console.log(result);}、function(console.log(理由); //空白領域をクリックすると)常に出力されます。夏はキャンセルされます。 }); }; }; var modalinstancectrl = function($ scope、$ modalinstance、items){$ scope.items = items; $ scope.selected = {item:$ scope.items []}; $ scope.ok = function(){$ modalinstance.close($ scope.selected); }; $ scope.cancel = function(){$ modalinstance.dismiss( 'cancel'); }; }; </script> </body> </html>上記は、編集者が紹介したAngularJSポップアップモードボックス(モデル)の関連コンテンツです。私はそれが誰にでも役立つことを願っています!