1. ホーム
  2. javascript

[解決済み] UI-routerを使って、オブジェクトをステートに渡すには?

2022-09-07 15:44:19

質問

ui-routerを使って、ある状態に遷移し、任意のオブジェクトを渡すことができるようにしたいのですが。

通常 $stateParams が使われていますが、この値はURLに挿入されると思うので、ユーザーがこのデータをブックマークできないようにしたいのです。

このようなことをしたいのですが。

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

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

URLに値をエンコードせずに行う方法はないでしょうか?

どのように解決するのですか?

バージョン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 です。