如何自动注入状态参数 [英] How to inject state parameter automatically

问题描述

摘要

我采用了棱角分明+ UI路由器在我的项目，我有嵌套的状态而这又包含不同的输入数额特别巨大，用户填写这些输入增量一步一步的不同意见的巨量。

问题

有时用户需要位于previous步骤的更多信息，以及浏览器返回按钮可以帮助用户先睹为快到这些数据，但只要用户presses它的信息，他已经进入被丢失，由于状态转变，这显然是一件坏事。

策略

为了克服上述问题，我有以下计划：

1. 用随机ID关联的每个用户的导航（想这是一个正确的术语）

而不是把视图模型到 $范围
2. 要prevent范围继承和序列化的问题，用普通的JavaScript对象将被存储绑定立即值到UI。


3. 添加专家以寻找那些存储对象关于修改


4. 一旦发现变化，序列化对象，并坚持它

说明

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

我们不希望将所有数据存储在URL，因为会有数据的相当长的一段金额不会装入URL。因此，为了提供URL不会打破担保，我们只放小的随机GUID / UUID进去以后允许本随机GUID / UUID获得与当前的导航相关的数据。

存储

有大量的存储方案可在那里：的localStorage ， IndexedDB的，的WebSQL ，会话存储，你的名字，但由于它们的交叉表，跨浏览器，浏览器特有的性质，将是很难操纵和管理所有这些进入存储数据。实施将是越野车/可能需要服务器端的支持。

因此​​，对于这种情况下最优雅的存储策略将存储在特殊的 window.name 变量，它能够请求之间在存储数据的数据。所以，直至您关闭选项卡中的数据是安全的。

问题

在代表一切上面写的，我有一个名为查看根认为，有一个状态参数 ID （这是随机的GUID / UUID）

  $ stateProvider.state（'观点'，{
    网址：'/查看/ {ID}
    控制器：'观'，
    templateUrl：意见/ view.html
}）;
 

所有的其他意见，从这个观点得到，有没有办法让 UI-SREF 指令自动注入一个随机的GUID / UUID为我的根视图的ID 状态参数，而不是每次都写， UI-SREF就像：

 ＆LT;一个UI的SREF =查看（{ID：GUID（）}）。someNestedView（{someNestedParam：getParam（）不只}）
 

我想有这样的：

 ＆LT;一个UI的SREF =view.someNestedView（{someNestedParam：getParam（）不只}）
 

解决方案

的AOP和Decorator模式就是答案。在COM prehensive描述可以在这里找到：

实验：耶稣罗德里格斯的装饰指令H2>

类似的溶液如下所述，可以观察到：

改变$ state.go（）在ui.router的默认行为默认情况下重装

如何将工作？还有就是要工作示例一个链接

在这种情况下，我们不解决从源头的随机的GUID来的。我们只是有它在运行时：

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

现在，我们可以注入的装饰是这样的：

 角
.module（'MyApp的'）
的.config（函数（$提供）{
    $ provide.decorator（'$状态'，函数（$代表）{        //让我们在本地使用国家名称
        VAR状态= $代表;        //让我们扩展的新功能的这个对象
        //'baseGo'，这在实际上，将保持参考
        //原来的走出去的功能
        state.baseGo = state.go;        //这里来我们新的走出去装潢
        VAR去=功能（，参数，可以选择）{
            PARAMS =参数|| {};            //只在失踪'ID'的情况下，
            //添加我们的随机/常量GUID
            如果（angular.isUndefined（params.id））{                params.id = guidFromSomeSource;
            }            //返回处理到baseGo' - 原
            this.baseGo（于参数，可以选择）;
        };        //指定新的走出去，现在装饰旧的'走'
        state.go =去;        返回$代表;
    }）;
}）
 

code应该是不言而喻的，检查它在行动这里

Abstract

Hi, I'm using angular + ui-router in my project, I have huge amount of nested states and different views that in turn contain huge amount of different inputs, a user fills these inputs incrementally step by step.

The problem

Sometimes users require additional info that is located on the previous step, and browsers "back" button helps the user to sneak peek into that data, but as soon as the user presses it, the info he already entered is lost due to state transition, which is obviously a bad thing.

Strategy

In order to overcome described problem I have the following plan:

1. Associate each user's "navigation" (guess this is a proper term) with a random id
2. To prevent scope-inheritance-and-serialization issues, instead of putting viewmodel into $scope use ordinary javascript object that will be storing immediate values that are bound to UI.
3. Add watcher to look for changes on that "storage object"
4. As soon as the change spotted, serialize the object and persist it

Explanations

Why do we need a random parameter in URL?

We don't want to store all data in URL, since there might be quite some amount of data that wont fit into URL. So in order to provide the guarantees the URL won't break, we put only small random GUID/UUID into it that later allows obtaining the data associated with current "navigation" by this random GUID/UUID.

The storage

There are multitude of storage scenarios available out there: LocalStorage, IndexedDB, WebSQL, Session Storage, you name it, but due to their cross-tab, cross-browser, browser-specific nature it would be hard to manipulate and manage all of the data that gets into the storage. The implementation will be buggy / might require server-side support.

So the most elegant storage strategy for this scenario would be storing data in special window.name variable which is capable of storing data in-between requests. So the data is safe until you close your tab.

The Question

On behalf of everything written above, I have the root view called "view" that has a state parameter id (this is the random GUID/UUID)

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

All of the other views derive from this view, is there way to make ui-sref directive to automatically inject a random GUID/UUID into id state parameter of my root view, instead of writing each time ui-sref's like:

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

I would like to have something like:

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

解决方案

The AOP and Decorator pattern are the answer. The comprehensive description could be found here:

Experiment: Decorating Directives by Jesus Rodriguez

Similar solution as described below, could be observed:

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

How that would work? There is a link to working example

In this case, we do not solve from which source the random GUID comes from. Let's just have it in runtime:

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

Now, we can inject an Decorator like this:

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

Code should be self explanatory, check it in action here

这篇关于如何自动注入状态参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！