角UI路由器嵌套的观点并不被刷新角服务检索数据 [英] Angular ui-router nested views don't refresh data retrieved by Angular Services

问题描述

我有一个使用UI路由器管理多个意见，其中有许多是在同一时间看到一个平凡的角度SPA。我需要模型来跨控制器是可见的，所以我写的服务，让我有控制器拉下已更新模型数据的最新副本。

I have a nontrivial Angular SPA that uses ui-router to manage multiple views, many of which are visible at the same time. I need models to be visible across controllers, so I have services written that allow me to have controllers pull down fresh copies of model data that has been updated.

我提前为这个问题的长度道歉，但我会状态，那么问题状态我做了什么来解决问题，我相信其他人的角度社区已经为此奋斗。

I apologize in advance for the length of the question, but I will state the problem then state what I have done to address issues I'm sure others in the Angular community have struggled with.

我相信我的问题是不理解的控制器/视图的生命周期，因为我得到的行为，其中一个控制器正确初始化我第一次去那里，但似乎永远不会再运行，甚至当我使用类似找到它 $ state.go（国家名称）。

I believe my problem is not understanding the lifecycle of controllers / views, because I get behavior where a controller initializes correctly the first time I go there, but then seems to never run again, even when I navigate to it using something like $state.go("state name").

在一个视图（人为的例子），我显示客户信息的汇总，而在另一种观点我允许用户更新该客户的更详细的个人资料。我希望用户编辑说，在详细查看了客户的姓氏，并有摘要视图自动识别变化并显示。

In one view (contrived example), I show a summary of information about a customer, and in another view I allow a user to update that customer's more detailed profile. I want a user to edit, say, the customer last name in the detailed view, and have the summary view automatically recognize the change and display it.

我有一个小提琴显示3次和一个简单的修改密码服务。流程是这样的：

I have a fiddle that shows 3 views and a simple password changing Service. The flow goes like this:

1. 您可以看到每个视图被初始化，并显示从服务检索到的初始密码。所有的观点都与DataService的同步。


2. 中间的视图，您可以输入新密码并更改存储在服务之一。控制台日志确认服务拿起就像你所期望的新密码。


3. （奇怪的行为＃1）当收到DataService的新密码，我希望其他的2次（顶部和底部），以显示新的。他们不...他们仍然显示初始密码。


4. 有一个按钮，允许用户去另一个状态通过 $ state.go（国家名称）（原始的子状态），这还检索密码，并将其显示。这工作的首次的（见＃5）。现在顶视图显示了过时的密码，中间视图显示新的，而下面的示出了新的为好。这似乎是正常的，因为DataService在包含一个新的密码值后的新观点被调用。


5. （奇怪的行为＃2）如果我在中间视图中单击返回并再次更改密码，然后点击按钮再次更改状态，底部的视图（其中更新步骤就好了＃4）不再更新其副本的密码。现在，所有3次表现出不同的密码，即使我使用的是单一的服务通过控制器的建议pretty之间的值多少随处可见的角的最佳实践。

1. You can see each view gets initialized and displays the initial password retrieved from the service. All views are in sync with the DataService.
2. The middle view allows you to enter a new password and change the one stored in the service. Console logging confirms that the service picks up the new password just like you would expect.
3. (odd behavior #1) When the DataService receives the new password, I would expect the other 2 views (top and bottom) to display the new one. They don't... they still display the initial password.
4. There is a button to allow a user to go to another state via $state.go("state name") (a child state of the original) which also retrieves the password and displays it. This works the first time (see #5). Now the top view shows the outdated password, the middle view shows the new one, and the bottom one shows the new one as well. This seems normal, since the new view is invoked after the DataService contains a new password value.
5. (odd behavior #2) If I click back in the middle view and change the password again, and click the button to change states again, the bottom view (which updated just fine in step #4) no longer updates its copy of the password. Now all 3 views show different passwords, even though I am using a single service to pass values between controllers as suggested pretty much everywhere you look for Angular best practices.

一些可能的解决方案：

• 添金德贝格具有优良的幻灯片 似乎使用推荐的UI路由器的国家层次结构的到需要从其他视图拿起值视图之间的通行证的数据。对于小规模的应用程序，我想我会解决这一点，但我希望我们的应用有30+的看法来自100 REST端点显示数据。我觉得不舒服的地方保持所有数据是由一个复杂的inheiritance树共享的应用程序。尤其是使用路由框架，在版本的 0.2.8


• 我可以使用事件有控制器监听数据模型的变化。这实际上效果很好。为了适应性能问题，我使用 $ rootScope.emit（）和 $范围。$ onRootScope（'事件名称'）装饰我的<一发现href=\"http://stackoverflow.com/questions/11252780/whats-the-correct-way-to-communicate-between-controllers-in-angularjs\">here.通过这种方法，我不太关心事件的表现比我约了一堆事件侦听器捆绑在一起的一切布线这个庞大的应用程序。有一个关于布线采用了棱角分明的事件大量应用<一个智慧的问题href=\"http://stackoverflow.com/questions/21416854/pros-cons-of-using-events-heavily-to-keep-controllers-in-sync-across-complex-ang\">here.


• 使用 $观看在DataService上的价值？我还没有试过，但我很犹豫铰链的应用程序这种规模在数百 $观看演出的原因 ES。
的

• 一个第三方库如 bacon.js （或任何一个十余人组成）可以简化事件面条，或创建观察的模型，我的控制器可以在不 $的风险看消化 ageddon。当然，如果有使用角度来处理我的问题上简洁的方式，我想preFER不与第三方的依赖泥泞的应用程序。


• 的东西，可以让控制器实际参考参考。服务模块，所以我不必依靠吨事件布线，复州层次，第三方库，或与数百 $的无欲无求的应用中观看 ES，然后踢了 $消化 s到更新控制器，以角引用服务？


• 一些解决依赖于时间考验OO和设计模式，而不是第三方库或框架，它具有与 0开头的版本。*

• Tim Kindberg has an excellent slideshow here that seems to recommend using ui-router's state heirarchy to "pass" data among views that need to pick up values from other views. For a smaller-scale app I think I would settle on this, but I expect our application to have 30+ views displaying data from over 100 REST endpoints. I don't feel comfortable maintaining an application where all the data is being shared by a complex inheiritance tree. Especially using a routing framework that is at version 0.2.8.
• I can use events to have controllers listen for changes in the data model. This actually works well. To accommodate performance concerns, I am using $rootScope.emit() and a $scope.$onRootScope('event name') decorator I found on here. With this approach I am less concerned about event performance than I am about wiring this huge app with a bunch of event listeners tying everything together. There is a question about the wisdom of wiring a large app using angular events here.
• Using $watch on the value in the DataService? I have not tried this but I am hesitant to hinge an app this size on hundreds of $watches for performances reasons.
• A third-party library like bacon.js (or any of a dozen others) that may simplify the event spaghetti, or create observable models that my controllers can watch without the risk of $digestageddon. Of course, if there is a concise way to handle my issue using Angular, I'd prefer not to muddy the app with 3rd party dependencies.
• Something that lets controllers actually reference .service modules by reference, so I don't have to depend on tons of event wiring, complex state hierarchies, 3rd party libraries, or seeding the app with hundreds of $watches and then kicking off $digests to update controllers' references to Angular services?
• Some solution that relies on time-tested OO and design patterns and not a 3rd-party library or framework that has a version that starts with 0.*.

在此先感谢...我AP preciate的帮助！

Thanks in advance... I appreciate the help!

推荐答案

这是没有ui.router的问题。如果你打算为你的模型（数据服务）是真理的唯一来源，你从摧毁它不要犯错.. ..对它的引用是。而在你的情况下，分配的，而不是给它一个参考primitve（字符串）直接向范围。换句话说......

This is no problem of ui.router. If you intend for your model (your data service) to be a single source of truth, you have to refrain from destroying it.. err.. the reference to it that is. And in your case, assigning a primitve (a string) directly to the scope, instead of a reference to it. In other words...

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

再后来设置/只

password.pw = newpassword

{{password.pw}}

继承人小提琴。而且这里是一个范围有点短读，它还包括一个角度聚会的地方MISKO谈论总是有（ING）点在模型的链接以及如何 $范围是揭露你的模型的地方，不您的模型。 （又名不是一个地方来分配像元密码='初始值）

Heres a fiddle. And also here is a short little read on scopes, It also includes a video of an angular meetup where Misko talks about "always have(ing) a dot in your model" link and how the $scope is a place to expose your model, not be your model. (aka not a place to assign primitives like password = 'initial value')

希望这有助于！

这篇关于角UI路由器嵌套的观点并不被刷新角服务检索数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！