web-dev-qa-db-ja.com

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

私はこのAngularJSアプリを持っています。すべてうまくいきます。

今、私は特定の条件が満たされたときに異なるポップアップを表示する必要があります、そして私は進むべき最善の方法は何だろうと思っていました。

現在私は2つの選択肢を評価していますが、私は他の選択肢に絶対にオープンです。

オプション1

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

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

オプション2

私は常に静的HTMLファイルにすべてのポップアップのコードを挿入することができました。それから、ngShowを使って、正しいポップアップだけを隠したり表示したりできます。

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

だから私は私が望むものを達成するためのより良い方法があるはずだと確信しています。

javascriptmodel-view-controllerangularjspopupshow-hide
178
Bruno

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

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

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

88
pkozlowski.opensource

私はAngularを自分で学んでいて、YouTubeのチャンネルからいくつかのビデオを見ていたので、面白いです。講演者はこのビデオであなたの正確な問題について述べています https://www.youtube.com/watch?v=ZhfUv0spHCY#t = 1681 28前後： 30分のマーク.

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

私は、新しいポップアップ要素をDOMに挿入し、同じ要素を表示したり非表示にしたりするのではなく、それらを別々に処理することを考えています。このようにして、あなたは複数のポップアップを持つことができます。

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

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

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

<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;
});
14
Ketan

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

編集：私は http://likeastore.github.io/ngDialog からng-dialogを使用してきました。これは柔軟性があり、依存関係はありません。

14
Nik Dow

Angular-uiにはdialogディレクティブが付属しています。それを使用してtemplateurlを任意のページに設定してください。必要に応じて他のいくつかのダイアログパラメータを渡すことができます。

7
user2203937