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モーダルダイアログボックスです。私はそれが誰にでも役立つことを願っています!