178

このAngularJSアプリがあります。すべてがうまく機能します。

特定の条件が満たされたときにさまざまなポップアップを表示する必要があり、どのように進めるのが最善なのか疑問に思っていました。

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

オプション1

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

これにより、MVC 設計パターンが壊れます。私はこの解決策に満足していません。

オプション 2

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

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

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

4

5 に答える 5

29

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

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

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

ビデオ全体も非常に興味深いものです:-)

于 2013-04-04T13:25:21.860 に答える
14

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

編集:以来、柔軟で依存関係のないhttp://likeastore.github.io/ngDialogの ng-dialog を使用しています。

于 2014-02-13T07:20:32.047 に答える
14
  • 「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;
});
于 2013-04-04T14:48:54.150 に答える
7

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

于 2013-04-11T20:15:45.013 に答える