2013-05-23 3 views
6

問題:Angular JSコントローラで複数のモーダルを管理するにはどうすればよいですか?Angular JSでモーダルを処理する最も簡単な方法は何ですか?

私はそれらを私のビューの一番下に置き、http://angular-ui.github.io/bootstrap/#/modal を使用していましたが、私は大きなhtmlテンプレート(それはうまくいく)で終わりましたが、非効率的です。入れUI-ブートストラップのモーダル

  • モーダルを使用してNGが-含ま経て、テンプレートに保存されているUI-ブートストラップ(お尻の痛み)
  • モーダルから

    • $ダイアログが含ま:私が試した何

      コントローラ内の私の見解の一番下にある< <現在稼働中です

    これは私に何かが不足しているように感じます。すべてのポインタ?

    EDIT:

    私は検索のLOTを行なったし、スクリプトを発見し、それを少しアップグレード:

    • あなたのモーダルは、彼らも、あなたがクリックした範囲内の外部テンプレート
    • ですボタン
    • 3つの異なる種類(テンプレートをロードし、メッセージを確認)

    rGilが、それはあまりにも複雑と思われる場合ディレクティブ、あなた自身ではなくUI-ブートストラップを使用し、述べたようにhttp://clouddueling.github.io/angular-common/

  • +1

    モーダルの形式が十分に似ている場合は、ディレクティブに1つ作成し、その要素を再利用して、必要に応じてモデルを変更します。 – rGil

    答えて

    8

    :私は以来、この問題をカバーレポを作った

    更新

    。すべてのモーダルは、多かれ少なかれ類似しています。モーダルを設定するには、テンプレートと2〜3のスコープ変数が必要です。その後、パラメータを渡してモーダルを開いたり閉じたりして、さらに機能を提供することができます。ディレクティブが大きくなるほど、ディレクティブが大きくなります。

    2つ目のオプションは、これらのモーダルで別々のHTML部分を作成し、ngIncludeを使用してビューに配置することです。これは、モーダルが異なる場合は時間を大幅に節約できますが、複数のページで頻繁に再利用されます。この面を下にすると、まだ開いて閉じている必要があるということです。 Angularの方法は、それが必要なだけであれば、トグルを処理するための指示を書くことです。簡単な方法は、少しjQueryを書いて、クリックなどでモーダルを開くことです。

    正直言って、それはすべてあなたの快適さのレベルです。 jQueryはコードを破棄しますか?いいえ、しかし、それは "角度の道"ではありません。 jQueryでは、3〜4行のコードでモーダルトグルを書くことができます。 Angular Wayを実行することは、指示と十数行のコード行です。しかし、Angularの方法は将来タグを書く利点があり、コードは必要ありません。モーダルが1つしかない場合は、jQueryで行うことができます。あなたの場合のように私が複数のモーダルを持っているなら、私は指示を学ぶために時間を投資し、私がそれを働かせる方法に働くものを考え出すでしょう。

    関連する問題