Angular ui-router 嵌套视图不会刷新 Angular 服务检索到的数据

2023-12-11

我有一个不平凡的 Angular SPA,它使用 ui-router 来管理多个视图,其中许多视图同时可见。我需要模型在控制器之间可见,因此我编写了服务,允许控制器拉取已更新的模型数据的新副本。

我提前为问题的长度表示歉意,但我会先说明问题,然后说明我为解决我确信 Angular 社区中的其他人也遇到过的问题所做的努力。

我相信我的问题是不理解控制器/视图的生命周期,因为我得到的行为是控制器在我第一次去那里时正确初始化,但随后似乎再也不会运行,即使我使用类似的方法导航到它$state.go("state name").

在一个视图(人为的示例)中,我显示有关客户的信息摘要,在另一个视图中,我允许用户更新该客户的更详细的个人资料。我希望用户在详细视图中编辑客户姓氏,并让摘要视图自动识别更改并显示它。

我有一个fiddle显示 3 个视图和一个简单的密码更改服务。流程是这样的:

  1. 您可以看到每个视图都已初始化并显示从服务检索到的初始密码。所有视图都与 DataService 同步。
  2. 中间视图允许您输入新密码并更改存储在服务中的密码。控制台日志记录确认服务会像您期望的那样获取新密码。
  3. (奇怪的行为#1)当 DataService 收到新密码时,我希望其他 2 个视图(顶部和底部)显示新密码。他们不...他们仍然显示初始密码。
  4. 有一个按钮允许用户转到另一个用户state via $state.go("state name")(原始状态的子状态)还检索密码并显示它。这有效第一次(参见#5)。现在,顶部视图显示过时的密码,中间视图显示新密码,底部视图也显示新密码。这看起来很正常,因为在 DataService 包含新密码值后调用新视图。
  5. (奇怪的行为#2)如果我在中间视图中单击返回并再次更改密码,然后单击按钮再次更改状态,则底部视图(在步骤#4中更新得很好)不再更新其密码副本。现在,所有 3 个视图都显示不同的密码,尽管我使用单个服务在控制器之间传递值,正如您在寻找 Angular 最佳实践的几乎所有地方所建议的那样。

一些可能的解决方案:

  • 蒂姆·金德伯格 (Tim Kindberg) 的幻灯片非常精彩here这似乎建议使用 ui-router国家等级制度在需要从其他视图获取值的视图之间“传递”数据。对于规模较小的应用程序,我想我会解决这个问题,但我希望我们的应用程序有 30 多个视图,显示来自 100 多个 REST 端点的数据。我对维护一个所有数据都由复杂的继承树共享的应用程序感到不舒服。特别是使用以下版本的路由框架0.2.8.
  • 我可以使用事件让控制器监听数据模型中的更改。这实际上效果很好。为了满足性能问题,我使用$rootScope.emit() and a $scope.$onRootScope('event name')我发现的装饰器here。通过这种方法,我不太关心事件性能,而是将这个巨大的应用程序与一堆事件侦听器连接在一起,将所有内容连接在一起。有一个关于使用角度事件连接大型应用程序是否明智的问题here.
  • Using $watch关于 DataService 中的值?我还没有尝试过这个,但我很犹豫是否要把这个大小的应用程序连接到数百个$watches 出于性能原因。
  • 像这样的第三方库bacon.js(或其他十几个中的任何一个)可以简化事件意大利面条,或创建可观察的模型,我的控制器可以观看,而不会有风险$digest艾格登。当然,如果有一种简洁的方法来使用 Angular 处理我的问题,我不希望让应用程序与第三方依赖关系变得混乱。
  • 让控制器实际引用的东西.service通过引用模块,因此我不必依赖大量的事件接线、复杂的状态层次结构、第 3 方库,或为应用程序植入数百个$watches 然后开始$digest更新控制器对 Angular 服务的引用?
  • 某些解决方案依赖于经过时间考验的 OO 和设计模式,而不是版本以以下开头的第三方库或框架0.*.

预先感谢...我感谢您的帮助!


这不是ui.router的问题。如果您打算让您的模型(您的数据服务)成为单一事实来源,则必须避免破坏它.. 错误.. 对它的引用。在您的情况下,直接将原语(字符串)分配给范围,而不是对其的引用。换句话说...

var password = {pw:'initial value'};

然后仅在稍后设置/绑定

password.pw = newpassword

{{password.pw}}

Heres a fiddle。这里还有一个关于示波器的简短读物,它还包括一个有角度的聚会的视频,其中 Misko 谈到“在你的模型中总是有一个点”link以及如何$scope是一个展示你的模型的地方,而不是成为你的模型。 (又名不是分配原语的地方,例如password = 'initial value')

希望这可以帮助!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular ui-router 嵌套视图不会刷新 Angular 服务检索到的数据 的相关文章

随机推荐