Angular modals（ui-router）和一般模態體系結構概念

我正在研究一個相當複雜的AngularJS Web應用程序，並且未能實現滿足我需求的工作模式/路由機制。Angular modals（ui-router）和一般模態體系結構概念

形勢

我的應用程序（簡體）以下實體：

客戶（有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  | 
     +----<-----<-------<-----<---+ +----<-----<-------<-----<----+

注：新的客戶和新的聯繫人狀態本身也是可以在常規窗口中打開的狀態。

我創建角-UI-路由器的路由爲：

新秩序：app.orders.new
新客戶：app.customers.new
新建聯繫人：app.contacts。新

發展

爲了支持多種模式的架構我已經試過幾件事情：

使用Angular UI Bootstrap Modal
使用使用自己的內置模式窗口

的 UI-Router-Extras方式

請注意以下幾個重要方面：

我不需要直接URL來直接指向模態窗口。網址可以保留在「新客戶」狀態。
行爲應該是Modal，所以不能在父窗口上工作。
它應該能夠彼此打開並顯示多個狀態（例如一個Modal中的嚮導）
以特定順序打開的多個模式應該以相同的順序關閉。（後進先出）

1.使用Angular UI Bootstrap Modal 這種方式似乎很有希望。我創建了使用定期航線的一些控制器和視圖一個單獨的路由：

Modal.Customers.New
Modal.Contacts.New

但不幸的是我掙扎開模態內部有更多的模態，並保持之前模態的狀態。我已經使用UI-Router-Extras粘滯狀態來保持背景狀態。然而，隨着UI路由器額外狀態，粘滯狀態僅適用於每個狀態都有自己的UI視圖。應該事先聲明ui-view。這是不可能的，因爲理論上用戶可以在我的應用程序中打開無限量的嵌套模式。

2.使用UI-Router-Extras方式使用自己的內置模式窗口

我試着用UI的路由器，額外的簡單模態例如在創建在角UI莫代爾代替一個簡單的模式： http://plnkr.co/edit/qgt0RkEnXDPDTdMJPIfy?p=info

但不幸的是我有與選項1相同的問題。問題是狀態和路由變得太複雜，當模式嵌套。

解決方案

我真的很掙扎什麼是最好的辦法了。我正在考慮顯示一個帶有iframe的Modal覆蓋窗口，它打開一個單獨的UI-Router路由，如：Modal.Customers.New，它只顯示應用程序的內容（而不是菜單欄等）。

當使用iframe時，我可以在父窗口和iframe上保留獨立的路由和狀態信息。我需要執行一些自定義javascript來支持將iframe轉換爲正確的格式，但這是可以接受的。

但它仍然感覺像一個「黑客」的解決方案。

我很想聽聽您的解決方案和見解。

來源

2016-04-25 Rody van Sambeek

最終我選擇了使用iframe和Angular UI Modals的組合。這種方法讓我在使用複雜的路線時有完全的靈活性，Angular UI的Modal屏幕會自動調整不同屏幕分辨率下的iframe的大小。

我已經創建了所有在Modals中使用的狀態的路由，前綴爲：modal。而不是應用程序。這種方式我只能使用頁面的「content」子視圖來顯示Modal內部，並且仍然具有原始控制器和視圖的完全可重用性。

唯一棘手的是當多個嵌套的Modals打開。在那裏我必須檢查我是否處於Modal或常規狀態。這是相當容易的使用狀態名稱：

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

在根幀（非模態視圖）我收集陣列中的所有開角UI情態動詞並檢查上打開一個新的模態，如果模態是在意見的根源（非模態）。如果沒有，我走過了iframe來使用父範圍：

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

其實，這工作得很好，因爲所有的iframe會在同一個域。

來源

2016-05-11 10:04:14

Angular modals（ui-router）和一般模態體系結構概念

回答

相關問題