javascript - 如何自动注入(inject)状态参数

Question

摘要

你好，我在我的项目中使用了 angular + ui-router，我有大量的嵌套状态和不同的 View ，它们又包含大量不同的输入，用户逐步填充这些输入。

问题

有时用户需要位于上一步的附加信息，浏览器的“后退”按钮可以帮助用户偷偷查看该数据，但一旦用户按下它，他已经输入的信息就会丢失，原因是状态转换，这显然是一件坏事。

策略

为了克服所描述的问题，我有以下计划:

1. 将每个用户的“导航”(猜猜这是一个合适的术语)与一个随机 ID 相关联
2. 为了防止范围继承和序列化问题，不要将 View 模型放入 $scope，而是使用普通的 javascript 对象，该对象将存储绑定(bind)到 UI 的即时值。
3. 添加观察者以查找该“存储对象”的变化
4. 一旦发现变化，序列化对象并持久化

说明

为什么我们需要 URL 中的随机参数？

我们不想将所有数据都存储在 URL 中，因为可能有相当多的数据不适合 URL。因此，为了保证 URL 不会中断，我们只将小的随机 GUID/UUID 放入其中，稍后允许通过该随机 GUID/UUID 获取与当前“导航”关联的数据。

存储

有许多可用的存储方案:LocalStorage、IndexedDB、WebSQL、Session Storage、随便你怎么说，但由于它们的交叉表、跨浏览器、特定于浏览器的性质，很难操纵和管理进入存储的所有数据。实现将有问题/可能需要服务器端支持。

因此，对于这种情况，最优雅的存储策略是将数据存储在特殊的 window.name 变量中，该变量能够在请求之间存储数据。因此，在您关闭标签之前，数据是安全的。

问题

代表上面写的所有内容，我有一个名为“view”的 Root View ，它有一个状态参数id(这是随机的 GUID/UUID)

$stateProvider.state('view', {
    url: '/view/{id}',
    controller: 'view',
    templateUrl: 'views/view.html'
});

所有其他 View 都派生自该 View ，有没有办法让 ui-sref 指令自动将随机 GUID/UUID 注入(inject)到我的 id 状态参数中 Root View ，而不是每次都写 ui-sref 这样的:

<a ui-sref="view({id:guid()}).someNestedView({someNestedParam: getParam()})"

我想要这样的东西:

<a ui-sref="view.someNestedView({someNestedParam: getParam()})"

Answer 1

AOP 和装饰器模式就是答案。可以在此处找到全面的描述:

Experiment: Decorating Directives by Jesus Rodriguez

可以观察到如下所述的类似解决方案:

Changing the default behavior of $state.go() in ui.router to reload by default

那将如何运作？有一个链接到 working example

在这种情况下，我们不解决随机 GUID 来自哪个来源。让我们在运行时使用它:

var guidFromSomeSource = '70F81249-2487-47B8-9ADF-603F796FF999';

现在，我们可以像这样注入(inject)装饰器:

angular
.module('MyApp')
.config(function ($provide) {
    $provide.decorator('$state', function ($delegate) {

        // let's locally use 'state' name
        var state = $delegate;

        // let's extend this object with new function 
        // 'baseGo', which in fact, will keep the reference
        // to the original 'go' function
        state.baseGo = state.go;

        // here comes our new 'go' decoration
        var go = function (to, params, options) {
            params = params || {};

            // only in case of missing 'id'
            // append our random/constant 'GUID'
            if (angular.isUndefined(params.id)) {

                params.id  = guidFromSomeSource;
            }

            // return processing to the 'baseGo' - original
            this.baseGo(to, params, options);
        };

        // assign new 'go', right now decorating the old 'go'
        state.go = go;

        return $delegate;
    });        
})

代码应该是自解释的，在action here中检查它