1

私はかなり複雑な AngularJS Web アプリケーションに取り組んでおり、私の要件を満たすモーダル/ルーティング メカニズムの実装に失敗し続けています。

状況

私のアプリケーションには（単純化された）次のエンティティがあります。

  • 顧客 (連絡先が 0 件以上)
  • 注文 (顧客は 1 人だけ)
  • 連絡先 (正確に 1 人の顧客に属します)

新しい注文の作成中に、既存の顧客を選択するか、新しい顧客を作成できます。顧客の作成プロセスでは、必要に応じて新しい連絡先を作成できます。

UI / UX ソリューション

この機能を「整頓された」モバイル フレンドリーな方法で正しく表現する方法をいくつか検討しました。まず、モーダルやポップアップから完全に離れようとし、いくつかの Angular ディレクティブを作成してページに動的に表示しようとしましたが、すぐに複雑になりすぎました。新しい顧客の作成には、複数の UI 状態といくつかのサブ状態 (タブ) が存在し、かなり複雑なロジックが含まれています。

次に、個別のブラウザー タブを使用して、localStorage を使用してそれらの間で通信することを検討しました。しかし、このアプローチは壊れやすく、ユーザーにとってはあまり一般的ではないように思えました。さらに、ユーザーは作業が終了するまで新しいタブで作業を続け、それから前のタブに戻ることができるようにする必要があります。これは、別のブラウザー タブを使用して行うことはできません。

私は Javascript ブラウザーのポップアップを見てきましたが、その方向も好きではありません。

ユーザーの観点からは、モーダル ダイアログを使用して UI フローに従うのが最善の方法だと思います。

UIの流れ 

+----------+                   +------------+                  +-----------+
|New Order | - Opens modal ->  |New Customer| - Opens modal -> |New Contact|
+----------+                   +------------+                  +-----------+
      ^                            |   ^                             |
      |                            OK  |                             OK
      |     Closes modal and       |   |      Closes modal and       |
      |    selects new customer    |   |     selects new contact     |
      +----<-----<-------<-----<---+   +----<-----<-------<-----<----+

注: 新規顧客と新規連絡先の状態は、通常のウィンドウで開くことができる状態でもあります。

Angular-UI-Router ルートを次のように作成しました。

  • 新しい注文: app.orders.new
  • 新規顧客: app.customers.new
  • 新しい連絡先: app.contacts.new

発達

複数のモーダル アーキテクチャをサポートするために、いくつかのことを試しました。

  1. Angular UI ブートストラップ モーダルの使用
  2. 独自に構築されたモーダル ウィンドウを使用したUI-Router-Extras の方法の使用

留意すべきいくつかの重要な側面:

  • モーダル ウィンドウを直接指す直接 URL は必要ありません。URL は「新規顧客」状態のままにすることができます。
  • 動作はモーダルである必要があるため、親ウィンドウでは機能しません。
  • 次々に複数の状態を開いて表示できる必要があります (たとえば、1 つのモーダルのウィザード)。
  • 特定の順序で開いた複数のモーダルは、同じ順序で閉じる必要があります。（最初のうちの最後の）

1. Angular UI Bootstrap Modal の使用 この方法は有望に思えました。通常のルートのいくつかのコントローラーとビューを使用する別のルーティングを作成しました。

  • Modal.Customers.New
  • Modal.Contacts.New

しかし残念ながら、モーダル内でより多くのモーダルを開き、以前のモーダルの状態を維持するのに苦労しています。バックグラウンド状態を維持するために UI-Router-Extras Sticky States を使用しました。ただし、UI-Router-Extras の状態のように、Sticky States は、すべての状態に独自の ui-view がある場合にのみ機能します。事前に ui-view を宣言する必要があります。理論的には、ユーザーはアプリケーションでネストされたモーダルを無制限に開くことができるため、これは不可能です。

2.独自に構築されたモーダルウィンドウを使用してUI-Router-Extrasの方法を使用する

次のように UI-Router-Extras の単純なモーダルの例を使用して、Angular UI Modal の代わりに単純なモーダルを作成しようとしました: http://plnkr.co/edit/qgt0RkEnXDPDTdMJPIfy?p=info

しかし、残念ながら、オプション 1 と同じ問題があります。問題は、モーダルがネストされていると状態とルーティングが複雑になりすぎることです。

解決

私は今、最善のアプローチが何であるかについて本当に苦労しています。アプリケーションのコンテンツのみを表示する (メニューバーなどではない) Modal.Customers.New のような別の UI-Router ルートを開く iframe を含むモーダル オーバーレイ ウィンドウを表示することを考えています。

iframe を使用すると、親ウィンドウと iframe で別々のルートと州の情報を利用できるようになります。iframe を適切な形式にスケーリングするには、カスタム JavaScript を実行する必要がありますが、これは許容範囲です。

しかし、それでも「ハッキングされた」ソリューションのように感じます。

あなたの解決策と洞察を聞きたいです。

4

1 に答える 1

0

最終的に、iframe と Angular UI Modals を組み合わせて使用​​することにしました。このアプローチにより、アプリで複雑なルートを使用する際に完全な柔軟性が得られ、Angular UI のモーダル画面は、さまざまな画面解像度で iframe のサイズを自動的に変更します。

モーダルで使用されるすべての状態のルートを、接頭辞: modal で作成しました。アプリの代わりに。このようにして、ページの「コンテンツ」サブビューのみを使用してモーダル内に表示し、元のコントローラーとビューを完全に再利用することができました。

唯一のトリッキーなビットは、複数のネストされたモーダルが開かれている場合です。そこで、自分がモーダルか通常の状態かを確認する必要がありました。州名を使用すると、これは非常に簡単でした。

IsModal() {
    return this.$state.current.name.indexOf("modal") == 0;
}

ルート フレーム (非モーダル ビュー) で、開いているすべての Angular UI モーダルを配列に収集し、モーダルがビューのルート (非モーダル) にある場合は、新しいモーダルを開くことを確認しました。そうでない場合は、次を使用して iframe を親スコープまでトラバースしました。

var parentScopeModalService = (<any>parent).angular.element(window.frameElement).scope().MyModalService;

すべての iframe が同じドメイン上にあるため、これは実際には非常にうまく機能しました。

于 2016-05-11T10:04:14.657 に答える