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


119

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

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

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

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

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

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


1
ui-routerメカニズムは、ナビゲーション全体でURLの状態を保持します。したがって、ユーザーがページを更新すると、ユーザーは元のページに戻ります。この動作を使用したくない場合は、他のメカニズム(コントローラー/ディレクティブの生の関数など)の使用を検討し、Cookie /を使用してください。一時データを保存するストレージ
Neozaru

データのキーとしてURLを使用してlocalStorageを使用しますか?
Neil

2
値はどこから来るのですか?Ui.routerには、要求された状態に遷移する前にスコープにデータをロードする「解決」の概念があります。同様に、onEnterメソッドとonExitメソッドがあります。さらに、ローカルストレージを使用できます。
ジョシュC.

@JoshCとして。述べたように、状態に移行する前にデータの解決を調べたいと思うかもしれません。github.com/angular-ui/ui-router/wiki#resolve
TrazeK

公式に行う方法については、stackOverlordの回答を参照してください。
AlikElzin-kilaka 2015年

回答:


163

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


作品transitionToだけでなく、。
AlikElzin-kilaka 2015年

13
私は何か間違ったことをしているに違いありません:-/私は0.2.13にいますが、パスしてオブジェクトにしようとすると、状態として文字列として出力されます[object Object]
ErichBSchulz

15
@ErichBSchulzこの回答には含まれていませんが、これを機能させるコツは、状態のURL文字列にパラメーター名を含め、タイプをJSONとして指定することです。例。この機能$stateProvider.state('myState', { url: '/myState/{myParam:json}', params: {myParam: null},...については、0.2.13のリリースノートとコードコメントを参照してください。
シオン

1
私のURLにはid paramがあり、それをparamsオブジェクトにも追加する必要がありました。{ url: '/mystate/{id:[0-9]+}', params: { id: null, myParam: null }, ...
GraehamF 2016年

3
遊びにはいくつかの黒魔術が必要です-私のjson全体がurl:((((
Kabachok

25

この問題には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);

1
実際にオブジェクトを渡す場合、これはかなり良いハックです:)
Tek

オブジェクトを直接渡すことができます。承認された回答を確認する
Kishore Relangi

20

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

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

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

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


私はこの正確なコードを試しましたが、オブジェクトは保持されません。
Virmundi 2014年

1
オブジェクトを渡すことはできません。単一のパラメーター値のみを渡すことができます。オブジェクトとして作成するには、すべてのプロパティを異なるurlパラメーターとして配置する必要があります。Angular-UI-Router開発者は、オブジェクト全体の受け渡しに取り組んでいます。実際、Svatopluk Ledl氏は素晴らしいソリューションを提供してくれました。オブジェクトをjson文字列全体として作成し、その後解析します。:)
Tek

13

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

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

1
このオブジェクトを.stateで受け取るには
Shubham

@Shubhamでは、オブジェクトを受け取る状態の「params」を構成し、$ stateParamsを使用してそのオブジェクトを取得します。詳細については、docangular-ui.github.io/ ui-router/site/ #/ api/…を参照してください。
tao

これは機能しますが、ページの更新後にデータを保持できません。
tao

9

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


    })

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.