AngularJS：在单独的视图中编辑“选择”字段答案

【问题标题】：AngularJS: Editing a "pick-one" field in a separate viewAngularJS：在单独的视图中编辑“选择”字段
【发布时间】：2016-11-26 19:46:14
【问题描述】：

我正在开发一个 AngularJS 1 (+ Ionic + ui-router) 单页应用程序。除其他外，该应用程序允许“CRUD”员工和公司。

我在“编辑员工”页面上苦苦挣扎。此页面显示名字和姓氏字段，并有一个按钮用于选择员工所在的公司。单击该按钮时，将打开一个新视图，列出所有现有公司。然后，用户可以选择一个以将其分配给员工，然后返回之前的屏幕（员工编辑），然后显示（只读）公司名称。

我的问题是，当返回到“编辑员工”视图时，它的控制器被重新加载，因此对名字和姓氏所做的更改会丢失，因为控制器从从数据库加载员工信息开始。

总结一下发生了什么：

所以我的问题是：管理这种编辑的最佳做法是什么？

另外，如果您有更好的方法将公司从公司列表视图转移到编辑员工视图，而不是使用全局变量，我将不胜感激。

顺便说一句，我不想在打开公司列表之前保存员工更改，因为我想让用户最终完全取消他的编辑。

非常感谢您的帮助

【问题讨论】：

使用选择框让用户直接从编辑员工表单中选择公司。
感谢您的回答。这实际上是我首先做的，但我想添加增量搜索，并让用户可能创建一个新公司。所以出于 GUI 设计的原因，我希望有一个单独的视图。请问还有什么建议吗？？再次感谢（顺便说一句，增量搜索可以与选择一起使用，但没有好看的 Ionic 小部件）
当离开编辑员工页面选择公司时，将其状态（即作为表单模型的员工对象）保存在服务的字段中，例如。当您从公司取货页面打包回来时，从您在服务中保存的状态恢复。不要使用全局变量来存储公司。将其存储在同一个服务中，或将其作为状态参数传递。

【解决方案1】：

要保持表单的状态，您可以使用服务。当编辑表单范围因一些未保存的更改而被破坏时，您只需将此数据保存到服务中。在此服务中，您甚至可以将其存储到本地存储中，以便在页面刷新后保留数据。

但更好的方法是在编辑表单上进行简单的下拉。如果信息太多，可以使用modals之类的。

【讨论】：

谢谢！向你提问 & JB Nizet：当控制器加载时，如何区分是第一次加载还是下一次加载？（第一次 = 我们需要从数据库加载数据；下一次 = 我们需要检索 tmp 数据）
@bfredo123 使用状态参数。您也可以在一个状态下完成所有这些操作，只需显示/隐藏用户编辑部分和公司选择部分。
你只需要检查这个服务。如果它包含特定 id 的未保存表单，则使用它，否则 - 请求 db。但是不要忘记提交后使服务失效
再次感谢您，感谢您，我现在有一个工作的东西！就我所知，“入侵服务”是什么意思？我猜它强制 Angular 重新加载它，但是你如何使它无效呢？
我的意思是，如果提交了表单，您应该从服务中删除有关此更改的数据，因此下次编辑此用户时，您将再次查询数据库。

【解决方案2】：

有几种方法可以处理这种情况：

既然你提到你正在使用 Ionic insted 打开一个新视图来显示公司列表使用Ionic Modal，这样你就可以在同一个控制器中处理所有事情，所以不需要保存全局变量
您可以监听 ui-router 的状态更改事件，在员工数据页面上您可以检查 from-state 是否为公司列表，如果是，则避免执行 api 调用来获取员工详细信息

我建议使用Ionic Modal

【讨论】：