ポップアップを最もエレガントな方法で表示する

このAngularJSアプリがあります。すべてうまくいきます。

ここで、特定の条件がtrueになったときにさまざまなポップアップを表示する必要があり、次に進むための最良の方法は何かと思っていました。

現在、私は2つのオプションを評価していますが、他のオプションについては完全にオープンです。

オプション1

ポップアップ用の新しいHTML要素を作成し、コントローラーから直接DOMに追加できます。

これは、MVCデザインパターンを壊します。私はこの解決策に満足していません。

オプション2

静的HTMLファイルのすべてのポップアップのコードをいつでも挿入できます。次に、を使用してngShow、正しいポップアップのみを非表示/表示できます。

このオプションは実際にはスケーラブルではありません。

ですから、私が望むものを達成するためのより良い方法がなければならないと私はかなり確信しています。

これまでのAngularJSモーダルでの経験に基づくと、最もエレガントなアプローチは、モーダルで表示される部分（HTML）テンプレートを提供できる専用サービスであると思います。

考えてみると、モーダルは一種のAngularJSルートですが、モーダルポップアップに表示されるだけです。

AngularUIブートストラッププロジェクト（http://angular-ui.github.com/bootstrap/）には、$modalパーシャルのコンテンツを次のように表示するサービスの実装である優れたサービス（バージョン0.6.0より前は$ dialogと呼ばれていました）があります。モーダルポップアップ。

私は自分でAngularを学んでいて、Youtubeのチャンネルからいくつかのビデオを見ていたので、それは面白いです。スピーカーは、このビデオhttps://www.youtube.com/watch?v=ZhfUv0spHCY#t=1681の28:30分のあたりで、正確な問題について言及しています。

その特定のコードをコントローラーではなくサービスに配置することになります。

私の推測では、新しいポップアップ要素をDOMに挿入し、同じ要素を表示または非表示にするのではなく、それらを個別に処理します。この方法で、複数のポップアップを持つことができます。

ビデオ全体も見るのがとても面白いです:-)

• 「ポップアップ」ディレクティブを作成し、ポップアップコンテンツのコンテナーに適用します。
• ディレクティブでは、絶対位置divのコンテンツをその下のマスクdivでラップします。
• ディレクティブ内から必要に応じてDOMツリー内の2つのdivを移動しても問題ありません。画面の中央にポップアップを配置するコードを含め、UIコードはディレクティブで問題ありません。
• ブールフラグを作成してコントローラーにバインドします。このフラグは可視性を制御します。
• OK /キャンセル機能などに結合するスコープ変数を作成します。

高レベルの例を追加するための編集（機能しない）

<div id='popup1-content' popup='showPopup1'>
  ....
  ....
</div>


<div id='popup2-content' popup='showPopup2'>
  ....
  ....
</div>



.directive('popup', function() {
  var p = {
      link : function(scope, iElement, iAttrs){
           //code to wrap the div (iElement) with a abs pos div (parentDiv)
          // code to add a mask layer div behind 
          // if the parent is already there, then skip adding it again.
         //use jquery ui to make it dragable etc.
          scope.watch(showPopup, function(newVal, oldVal){
               if(newVal === true){
                   $(parentDiv).show();
                 } 
              else{
                 $(parentDiv).hide();
                }
          });
      }


   }
  return p;
});

Angularでブートストラップを必要とせずにモーダルダイアログを実行する簡単な方法については、http：//adamalbrecht.com/2013/12/12/creating-a-simple-modal-dialog-directive-in-angular-js/を参照して ください。

編集：私はそれ以来、柔軟性があり依存関係のないhttp://likeastore.github.io/ngDialogの ng-dialogを使用しています。

Angular-UIにはダイアログディレクティブが付属しています。それを使用して、templateurlに含めるページに設定します。これは最もエレガントな方法であり、プロジェクトでも使用しています。必要に応じて、ダイアログの他のいくつかのパラメーターを渡すことができます。