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

Question

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

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

我想做这样的事情.

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

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

有没有办法在不将值编码到URL的情况下执行此操作？

Answer 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,name:'what'}});

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

url是/ foo/bar？param2 = baz.

Answer 2

这个问题有两部分

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

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

2)传递一个对象作为参数:嗯,现在没有直接的方法,因为每个参数都转换为字符串(编辑:从0.2.13开始,这不再是真的 - 你可以直接使用对象),但是您可以通过自己创建字符串来解决它

toParamsJson = JSON.stringify(toStateParams);

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

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

Answer 3

实际上你可以做到这一点.

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

这是关于state.go中选项的官方文档

在那里描述了一切,你可以看到这是要做的事情.

Answer 4

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

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

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


    })