Ui-router状态更改:保持控制器和范围但是销毁DOM

时间:2017-03-20 22:03:14

标签: angularjs angular-ui-router angular-ui-router-extras

我正在使用ui-router 1.0.0-beta.3,angular 1.5。到目前为止,ui-router非常棒!

我有一个root状态,到目前为止有一些子状态,但是我注意到兄弟姐妹之间的切换(同一根父母的孩子)会导致完全重新创建我转换/转到的状态。

我想保留范围变量,因为在我的应用中,用户可以切换一些按钮,输入日期等,然后可能切换到另一个状态,做某事,然后切换回来,但现在他们所有的部分工作都是不见了。我也喜欢能够为“非活动”状态销毁DOM的选项,因为实际上某些状态可能会变得很大,或者用户可能会创建很多DOM,因此我希望尽可能保持DOM的亮度对于一些州。

据我所知,ui-router-extras粘性状态功能就是这样!当我想在某些组件上销毁DOM时,我可以使用$ state.includes函数来定位。但是,似乎ui-router-extras不适用于ui-router 1.0.0-beta.3。作者确实为较新的ui-router创建了一个端口,但是发布版本是打字稿,我不知道如何将其编译成单个js文件。请参阅:https://github.com/ui-router/sticky-states/issues/4

也许我需要一个不使用粘性状态的解决方案---任何想法?我正在考虑使用服务来缓存范围值,并且确实阅读了其他一些SO的答案。这意味着,每个组件,我需要处理要缓存的范围值,等等。这绝对是一种可能性,但我想知道是否有人有任何其他技术或知识关于ui-router这样可能还有另一种方式实现我的目标:转换控制器/范围转换。

1 个答案:

答案 0 :(得分:3)

从以下网址阅读作者的打字稿源代码(这是一个快乐,写得非常好的代码):

https://github.com/ui-router/sticky-states/blob/master/src/stickyStates.ts

我决定将它迁移到我自己的javascript服务,这将与ui.router 1.0.0-beta.3兼容。顺便说一下,ui.router 1.0.0-beta.3可以在:

获得

https://unpkg.com/angular-ui-router@1.0.0-beta.3/release/angular-ui-router.js

我的方法是:因为1.0.0-beta.3似乎没有onCreate过渡钩子,我会装饰$ transitions.create函数本身。为此,我需要将大量辅助函数和粘性状态的核心功能注入装饰中。所以我让StickyStatesUtil提供程序为我做了这个。

迁移由两部分组成:(1)一个名为sticky-states-util的模块,它创建StickyStatesUtil提供程序,以及用于检查状态/状态名称是否处于非活动状态的有用服务,以及一个inactiveEvent,如果设置为某个值,则会导致$ rootScope广播应用程序中要使用的任何内容的非活动状态名称的json映射。如果未设置,则跳过。并且(2),注入$的角度app中的实际配置块提供并使用它来装饰$ transition服务和新的"创建"功能

由于其他几个人和我在同一个地方,我在github上提供了这段代码:

https://github.com/dsills22/sticky-states-ui-router-1-js