web-dev-qa-db-ja.com

UIルーターを使用してオブジェクトを状態に渡す方法

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

通常、$stateParamsが使用されることは承知していますが、この値はURLに挿入されていると考えており、ユーザーがこのデータをブックマークできるようにしたくありません。

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

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

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

URLに値をエンコードせずにこれを行う方法はありますか？

javascriptangularjsangular-ui-router
117
eddiec

バージョン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/98 、便宜上ここに再現：

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です。

160
stackOverlord

この問題には2つの部分があります

1）URLを変更しないパラメーターを使用する（paramsプロパティを使用）：

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

2）パラメーターとしてオブジェクトを渡す：さて、 直接行う方法 はありません。すべてのパラメーターが文字列に変換されるため（EDIT：0.2.13以降、これは真実ではなくなりました-オブジェクトを直接使用できます）が、独自に文字列を作成することで回避できます

toParamsJson = JSON.stringify(toStateParams);

そして、ターゲットコントローラーでオブジェクトを再度デシリアライズします

originalParams = JSON.parse($stateParams.toParamsJson);
25
Svatopluk Ledl

実際にこれを行うことができます。

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

これはstate.goのオプションに関する公式ドキュメントです

そこにすべてが記述されており、ご覧のとおり、これが実行方法です。

20
Tek

また、テンプレートでui-sref属性を使用してオブジェクトを渡すこともできます

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

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


    })
9
vrbsm

いいえ、paramsがtransitionToに渡されると、URLは常に更新されます。

これは state.js：698 in i-router で発生します。

3
afternoon