如何自动注入状态参数

Question

摘要

嗨，我在我的项目中使用了角度+ ui-router，我有大量的嵌套状态和不同的视图，而这些视图又包含大量不同的输入，用户逐步逐步填充这些输入。

问题

有时，用户需要上一步中的其他信息，以及浏览器＆＃34;返回＆＃34;按钮可以帮助用户偷看这些数据，但是一旦用户按下它，他输入的信息就会因状态转换而丢失，这显然是一件坏事。

策略

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

1. 关联每个用户＆＃34;导航＆＃34; （猜这是一个合适的术语），随机id
2. 要防止范围继承和序列化问题，请使用将存储绑定到UI的直接值的普通javascript对象，而不是将viewmodel放入$scope。
3. 添加观察者以查找＆＃34;存储对象＆＃34;
的更改
4. 发现更改后，将对象序列化并保留

说明

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

我们不希望将所有数据存储在网址中，因为可能会有相当多的数据不适合网址。因此，为了提供URL不会中断的保证，我们只将小的随机GUID / UUID放入其中，以后允许获取与当前＆＃34;导航＆＃34;相关的数据。通过这个随机的GUID / UUID。

存储空间

有许多可用的存储方案：LocalStorage，IndexedDB，WebSQL，Session Storage，您可以命名，但由于它们的交叉表，交叉-browser，特定于浏览器的特性，很难操纵和管理进入存储的所有数据。实施将是错误/可能需要服务器端支持。

因此，此方案最优雅的存储策略是将数据存储在特殊的window.name变量中，该变量能够在请求之间存储数据。因此，在关闭标签页之前，数据是安全的。

问题

代表上面写的所有内容，我的根视图名为＆＃34; view＆＃34;具有状态参数id（这是随机GUID / UUID）

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

所有其他视图都来自这个视图，有没有办法使ui-sref指令自动将随机GUID / UUID注入我的根视图的id状态参数，而不是每次写入ui-sref就像：

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

我希望有类似的东西：

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

Answer 1

AOP和装饰者模式就是答案。全面的描述可以在这里找到：

耶稣罗德里格兹

Experiment: Decorating Directives

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

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

这会怎么样？有working example

的链接

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

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

现在，我们可以像这样注入一个装饰器：

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;
    });        
})

代码应该是自我解释的，请在行动here

中查看