如何使用 UI-router 将对象传递到状态？答案

【问题标题】：How to pass an object into a state using UI-router?如何使用 UI-router 将对象传递到状态？
【发布时间】：2014-01-05 02:28:28
【问题描述】：

我希望能够使用 ui-router 转换到状态并传递任意对象。

我知道通常使用$stateParams，但我相信这个值是插入到 URL 中的，我不希望用户能够为这些数据添加书签。

我想做这样的事情。

$state.transitionTo('newState', {myObj: {foo: 'bar'}});

function myCtrl($stateParams) {
   console.log($stateParams.myObj); // -> {foo: 'bar'}
};

有没有办法在不将值编码到 URL 中的情况下做到这一点？

【问题讨论】：

ui-router 机制在导航中保留 URL 状态。因此，如果用户刷新页面，他会回到他所在的页面。如果您不想使用此行为，请考虑使用其他机制（控制器/指令中的原始函数等），并使用 cookie/存储临时数据的存储
使用带有 url 的 localStorage 作为数据的关键？
值从何而来？ Ui.router 具有“解析”的概念，用于在转换到请求状态之前将数据加载到范围。类似的还有 onEnter 和 onExit 方法。此外，您可以使用本地存储。
作为@JoshC。提到，听起来您可能想在移动到某个状态之前研究解析数据。 github.com/angular-ui/ui-router/wiki#resolve
查看stackOverlord的回答，了解如何正式做到这一点。

标签： javascript angularjs angular-ui-router

【解决方案1】：

在 0.2.13 版本中，您应该能够将对象传递到 $state.go，

$state.go('myState', {myParam: {some: 'thing'}})

$stateProvider.state('myState', {
                url: '/myState/{myParam:json}',
                params: {myParam: null}, ...

然后访问控制器中的参数。

$stateParams.myParam //should be {some: 'thing'}

myParam 不会显示在 URL 中。

来源：

请参阅 christopherthielen https://github.com/angular-ui/ui-router/issues/983 的评论，为方便起见，在此转载：

christopherthielen：是的，这应该在 0.2.13 中现在可以使用。

.state('foo', { url: '/foo/:param1?param2', params: { param3: null } // null 是默认值 });

$state.go('foo', { param1: 'bar', param2: 'baz', param3: { id: 35, 名称：'什么' } });

'foo' 中的$stateParams 现在是 { param1: 'bar', param2: 'baz', param3: { id：35，名称：'what' } }

网址是 /foo/bar?param2=baz。

【讨论】：

也适用于transitionTo。
我一定是做错了什么：-/我在 0.2.13 但如果我尝试通过并反对它会以字符串 [object Object] 的形式出现
@ErichBSchulz 虽然它不包含在此答案中，但使其工作的技巧是在状态的 URL 字符串中包含参数名称并将类型指定为 JSON。前任。 $stateProvider.state('myState', { url: '/myState/{myParam:json}', params: {myParam: null},... 请参阅 0.2.13 release notes 和此功能的代码 cmets。
我的 URL 中有一个 id 参数，并且还必须将它添加到 params 对象中。 { url: '/mystate/{id:[0-9]+}', params: { id: null, myParam: null }, ...
一定有一些黑魔法在起作用——我的整个 json 都在显示 url :(((

【解决方案2】：

这个问题有两个部分

1) 使用不会改变 url 的参数（使用 params 属性）：

$stateProvider
    .state('login', {
        params: [
            'toStateName',
            'toParamsJson'
        ],
        templateUrl: 'partials/login/Login.html'
    })

2) 将对象作为参数传递：好吧，没有direct way how to do it now,，因为每个参数都转换为字符串（EDIT：从 0.2.13 开始，这不再是真的 - 您可以直接使用对象），但您可以通过创建来解决它你自己的字符串

toParamsJson = JSON.stringify(toStateParams);

在目标控制器中再次反序列化对象

originalParams = JSON.parse($stateParams.toParamsJson);

【讨论】：

实际上，对于传递对象，这是一个很好的 hack :)
我们可以直接传递对象。检查接受的答案

【解决方案3】：

其实你可以做到的。

$state.go("state-name", {param-name: param-value}, {location: false, inherit: false});

This is the official documentation about options in state.go

所有内容都在此处进行了描述，正如您所见，这是要完成的方法。

【讨论】：

我试过这个确切的代码，但对象没有被保留。
你不能传递对象，你只能传递单个参数值....你把它作为一个对象，你必须把所有的属性作为不同的 url 参数。 Angular-ui-router 开发人员仍在努力传递整个对象。实际上，Svatopluk Ledl 的人给出了一个很好的解决方案。只需将对象作为一个完整的 json 字符串，然后解析它。 :)

【解决方案4】：

顺便说一句，您还可以在模板中使用 ui-sref 属性来传递对象

ui-sref="myState({ myParam: myObject })"

【讨论】：

我们如何在.state中接收这个对象
@Shubham 您将为接收对象的状态配置“参数”，然后使用 $stateParams 检索该对象。有关详细信息，请参阅文档angular-ui.github.io/ui-router/site/#/api/…。
这可行，但页面刷新后无法保留数据。

【解决方案5】：

1)

$stateProvider
        .state('app.example1', {
                url: '/example',
                views: {
                    'menuContent': {
                        templateUrl: 'templates/example.html',
                        controller: 'ExampleCtrl'
                    }
                }
            })
            .state('app.example2', {
                url: '/example2/:object',
                views: {
                    'menuContent': {
                        templateUrl: 'templates/example2.html',
                        controller: 'Example2Ctrl'
                    }
                }
            })

2)

.controller('ExampleCtrl', function ($state, $scope, UserService) {


        $scope.goExample2 = function (obj) {

            $state.go("app.example2", {object: JSON.stringify(obj)});
        }

    })
    .controller('Example2Ctrl', function ($state, $scope, $stateParams) {

        console.log(JSON.parse($state.params.object));


    })

【讨论】：

【解决方案6】：

不，当参数传递给 transitionTo 时，URL 将始终更新。

这发生在state.js:698 中的ui-router。

【讨论】：