如何使用 UI 路由器将一个对象传递到一个状态?

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

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

我想做这样的事。

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


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

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

123855 次浏览

不,当参数传递到 transitionTo时,URL 将始终更新。

这发生在 路由器state.js:698上。

其实你可以的。

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

This is the official documentation about options in state.go

一切都在那里描述,正如你所看到的,这就是要做的事情。

这个问题有两部分

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

在版本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的评论:

克里斯托弗 · 希伦: 是的,这个应该在0.2.13中可以工作了。

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

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。

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

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

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




})