GUIプログラム開発の過程で、多くの場合、モーダルダイアログボックスと非モーダルダイアログボックスの概念があります。
モーダルダイアログ：子のインターフェイスアクティビティ中、親ウィンドウはメッセージに応答できません。排他的なユーザー入力
非モーダルダイアログボックス：Windows間に効果がありません
主な違い：非モーダルダイアログボックスは、メッセージループをアプリと共有しており、ユーザーのみを占有することはありません。
モーダルダイアログボックスはユーザーの入力のみを占め、他のインターフェイスは応答できません
この記事の内容
Angular JS実装パターンダイアログ。 Angularjs v1.5.3およびBootstrap v3.3.6に基づいています。
プロジェクト構造
図1プロジェクト構造
実行結果
図1操作結果：大きなモード
index.html
< 8]> <！ - > <html> <！ - < rel = "styleSheet" href = "../ src/vendor/bootstrap/dist/css/bootstrap.css"> </head> <body ng-app = "myapp"> <！ - モーダルテンプレート - > <スクリプトタイプ= "テキスト/ng-template" id = "mymodelContent.html </div> <div> <ul> <li ng-repeat = "アイテムのアイテム"> <a ng-click = "selected.item = item"> {{item}} </a> </li> <div> <button ng-click = "cancel（）"> exit </button> </script> <div> angularjsモーダルダイアログ</div> <section> <セクションng-controller = "modaldemo" style = "margin：40px auto; float：none; background：#fff; padding：30px; ng-click = "open（）"> modal </button> <button ng-click = "open（ 'sm'）"> small modal </button> <hr> <div ng-show = "selected">現在の選択：{{selected}} </div> </section> </セクション> <！ src = "../ src/vendor/angular/angular.js"> </scrip> <script src = "http://cdn.bootcss.com/angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.js"> </script> < src = "../ src/js/mymodal.js"> </script> </body> </html>mymodal.js
/** * */angular.module（ 'myapp'、['ui.bootstrap']）// demo controller.controller（ 'modaldemo'、function（$ scope、$ modal、$ log）{//リスト$ scope.items = ['angularjs'、 'backbone'、 'canjs'、 'ember'、 'ember'、 'ember'、 'ember function（size）{var modalinstance = $ modal.open（{templateurl： 'mymodelcontent.html'、controller： 'modalinstancectrl'、//モーダルサイズのコントローラーの指定：{項目：function（）{return $ scope.items;}}） modalinstance.result.then（function（selecteditem）{$ scope.selected = selectedItem;}、function（）{$ log.info（ '' + new date（））}）//モーダルコントローラー。 $ scope.selection = $ scope.items};上記のコンテンツは、編集者が紹介したAngularJSモーダルダイアログボックスです。私はそれが誰にでも役立つことを願っています！