1

我正在开发一个相当复杂的 AngularJS Web 应用程序，并且一直未能实现满足我要求的工作模式/路由机制。

情况

我的应用程序具有（简化）以下实体：

  • 客户（有 0 个或多个联系人）
  • 订单（只有 1 个客户）
  • 联系人（恰好属于 1 个客户）

在创建新订单期间，可以选择现有客户，也可以创建新客户。在客户的创建过程中，可以选择创建一个新的联系人。

UI/UX 解决方案

我已经研究了几种以“简洁”和移动友好的方式正确表示此功能的方法。首先，我尝试完全远离模态框或弹出窗口，并尝试创建几个 Angular 指令以在页面中动态显示，但这很快就变得太复杂了。新客户的创建存在多个 UI 状态和一些子状态（选项卡），其中包含相当复杂的逻辑。

然后我查看了使用单独的浏览器选项卡并使用 localStorage 在它们之间进行通信。然而，这种方法似乎很脆弱，对用户来说也不是很常见。此外，用户应该继续在新标签中工作直到完成，然后才能返回到上一个标签。使用单独的浏览器选项卡是不可能的。

我看过 Javascript 浏览器弹出窗口，但我也不喜欢那个方向。

从用户的角度来看，我认为最好的方法是使用模态对话框来遵循 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     |
      +----<-----<-------<-----<---+   +----<-----<-------<-----<----+

注意：New Customer 和 New Contact 状态本身也是可以在常规窗口中打开的状态。

我已将 Angular-UI-Router 路由创建为：

  • 新订单：app.orders.new
  • 新客户：app.customers.new
  • 新联系人：app.contacts.new

发展

为了支持多模式架构，我尝试了几件事：

  1. 使用Angular UI 引导模式
  2. 使用UI-Router-Extras方式使用自己构建的模态窗口

要记住的一些重要方面：

  • 我不需要直接 URL 来直接指向模态窗口。URL 可以保持在“新客户”状态。
  • 行为应该是模态的，所以不能在父窗口上工作。
  • 它应该能够依次打开并显示多个状态（例如一个模态中的向导）
  • 以特定顺序打开的多个模态应该以相同的顺序关闭。（后进先出）

1. 使用Angular UI Bootstrap Modal 这种方式看起来很有希望。我创建了一个单独的路由，它使用一些控制器和常规路由的视图：

  • 模态.客户.新
  • Modal.Contacts.New

但不幸的是，我很难在模态中打开更多模态并保持前一个模态的状态。我使用 UI-Router-Extras Sticky States 来保持背景状态。然而，作为 UI-Router-Extras 状态，Sticky States 仅在每个状态都有自己的 ui-view 时才有效。应事先声明 ui-view。这是不可能的，因为理论上用户可以在我的应用程序中打开无限数量的嵌套模式。

2. 使用UI-Router-Extras方式使用自己构建的 Modal 窗口

我尝试使用 UI-Router-Extras 的简单模态示例创建一个简单的模态而不是 Angular UI 模态，如下所示：http ://plnkr.co/edit/qgt0RkEnXDPDTdMJPIfy?p=info

但不幸的是，我遇到了与选项 1 相同的问题。问题是当模式嵌套时，状态和路由变得过于复杂。

解决方案

我真的在为现在最好的方法而苦苦挣扎。我正在考虑显示一个带有 iframe 的模态覆盖窗口，它打开一个单独的 UI-Router 路由，例如：Modal.Customers.New，它只显示应用程序的内容（而不是菜单栏等）。

使用 iframe 时，我可以在父窗口和 iframe 上保留单独的路由和状态信息。我需要执行一些自定义 javascript 来支持将 iframe 缩放为正确的格式，但这是可以接受的。

但它仍然感觉像是一个“被黑”的解决方案。

我很想听听您的解决方案和见解。

4

1 回答 1

0

最终，我选择了将 iframe 与 Angular UI Modals 结合使用。这种方法让我在我的应用程序中使用复杂的路由时具有完全的灵活性，并且 Angular UI 的模态屏幕会在不同的屏幕分辨率上自动调整 iframe 的大小。

我已经为 Modals 中使用的所有状态创建了路由，前缀为：modal。而不是应用程序。这样，我只能使用页面的“内容”子视图在 Modal 中显示，并且仍然具有原始控制器和视图的完全可重用性。

唯一棘手的一点是打开多个嵌套的 Modals 时。在那里我必须检查我是处于模态还是常规状态。这很容易使用州名：

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 回答