AngularJS:使用ui-router将对象传递到一个状态

I'd like to be able to transition to a state and a pass an arbitrary object using ui-router.

我希望能够通过ui-router过渡到状态和传递任意对象。

I'm aware that usually $stateParams is used, but I believe this value is inserted into the URL, and I don't want users to be able to bookmark this data.

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

I'd like to do something like this.

我想做这样的事。

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

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

Is there a way to do this without encoding values into the URL?

是否有一种方法可以在不将值编码到URL中的情况下实现这一点?

6 个解决方案

#1

151

In version 0.2.13, You should be able to pass objects into $state.go,

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

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

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

and then access the parameter in your controller.

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

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

myParam will not show up in the URL.

myParam不会出现在URL中。

Source:

来源:

See the comment by christopherthielen https://github.com/angular-ui/ui-router/issues/983, reproduced here for convenience:

参见christopherthielen的评论，https://github.com/angular-ui/ui-router/issues/983，为了方便起见，转载如下:

christopherthielen: Yes, this should be working now in 0.2.13.

christopherthielen:是的，现在应该是0.2.13。

.state('foo', { url: '/foo/:param1?param2', params: { param3: null } // null is the default value });

.state(“foo”{ url:“/ foo /:param1 ?params: {param3: null} / null是默认值};

$state.go('foo', { param1: 'bar', param2: 'baz', param3: { id: 35, name: 'what' } });

美元的状态。(“foo”{ param1:“酒吧”,param2:“记者”,param3:{ id:35岁,名字:‘什么’} });

$stateParams in 'foo' is now { param1: 'bar', param2: 'baz', param3: { id: 35, name: 'what' } }

$stateParams in 'foo'现在是{param1: 'bar'， param2: 'baz'， param3: {id: 35, name: 'what'}}

url is /foo/bar?param2=baz.

url / foo / bar ? param2 =巴兹。

#2

There are two parts of this problem

这个问题有两个方面

1) using a parameter that would not alter an url (using params property):

1)使用不改变url的参数(使用params属性):

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

2) passing an object as parameter: Well, there is no direct way how to do it now, as every parameter is converted to string (EDIT: since 0.2.13, this is no longer true - you can use objects directly), but you can workaround it by creating the string on your own

2)传递一个对象作为参数:好吧，现在没有直接的方法来实现它，因为每个参数都被转换为string(编辑:因为0.2.13不再是真的——你可以直接使用对象)，但是你可以通过自己创建字符串来解决这个问题

toParamsJson = JSON.stringify(toStateParams);

and in target controller deserialize the object again

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

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

#3

Actually you can do this.

实际上你可以这么做。

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

This is the official documentation about options in state.go

这是关于状态选项的官方文档

Everything is described there and as you can see this is the way to be done.

一切都在那里被描述，正如你所看到的，这就是我们要做的。

#4

Btw you can also use the ui-sref attribute in your templates to pass objects

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

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

#5

$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'
                    }
                }
            })

.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

No, the URL will always be updated when params are passed to transitionTo.

不，当params被传递到transitionTo时，URL总是会被更新。

This happens on state.js:698 in ui-router.

这发生在状态。在ui-router js:698。

#1

151