Bagaimana cara melewatkan objek ke dalam keadaan menggunakan UI-router?


119

Saya ingin dapat bertransisi ke suatu keadaan dan melewatkan objek sewenang-wenang menggunakan ui-router.

Saya biasanya menyadarinya $stateParams digunakan, tetapi saya yakin nilai ini dimasukkan ke dalam URL, dan saya tidak ingin pengguna dapat menandai data ini.

Saya ingin melakukan sesuatu seperti ini.

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

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

Apakah ada cara untuk melakukan ini tanpa mengkodekan nilai ke dalam URL?


1
Mekanisme ui-router mempertahankan status URL di seluruh navigasi. Jadi, jika pengguna menyegarkan halaman, dia kembali ke halaman tempatnya berada. Jika Anda tidak ingin menggunakan perilaku ini, pertimbangkan untuk menggunakan mekanisme lain (fungsi mentah dalam pengontrol / arahan Anda, dll), dan gunakan cookie / penyimpanan untuk menyimpan data sementara
Neozaru

Gunakan localStorage dengan url sebagai kunci untuk data Anda, mungkin?
Neil

2
Dari mana asalnya nilai-nilai itu? Ui.router memiliki konsep "tekad" untuk memuat data ke ruang lingkup sebelum beralih ke status yang diminta. Demikian pula, ada metode onEnter dan onExit. Selain itu, Anda dapat menggunakan penyimpanan lokal.
Josh C.

Sebagai @JoshC. disebutkan, sepertinya Anda mungkin ingin melihat ke dalam menyelesaikan data sebelum pindah ke suatu keadaan. github.com/angular-ui/ui-router/wiki#resolve
TrazeK

Lihat jawaban stackOverlord sebagai cara melakukannya secara resmi.
AlikElzin-kilaka

Jawaban:


163

Di versi 0.2.13, Anda harus bisa meneruskan objek ke $ state.go,

$state.go('myState', {myParam: {some: 'thing'}})

$stateProvider.state('myState', {
                url: '/myState/{myParam:json}',
                params: {myParam: null}, ...

lalu akses parameter di pengontrol Anda.

$stateParams.myParam //should be {some: 'thing'}

myParam tidak akan muncul di URL.

Sumber:

Lihat komentar oleh christopherthielen https://github.com/angular-ui/ui-router/issues/983 , direproduksi di sini untuk kenyamanan:

christopherthielen: Ya, ini seharusnya berfungsi sekarang di 0.2.13.

.state ('foo', {url: '/ foo /: param1? param2', params: {param3: null} // null adalah nilai default});

$ state.go ('foo', {param1: 'bar', param2: 'baz', param3: {id: 35, name: 'what'}});

$ stateParams di 'foo' sekarang menjadi {param1: 'bar', param2: 'baz', param3: {id: 35, name: 'what'}}

url adalah / foo / bar? param2 = baz.


Bekerja dengan transitionTobaik.
AlikElzin-kilaka

13
Saya pasti melakukan sesuatu yang salah: - / Saya menggunakan 0.2.13 tetapi jika saya mencoba untuk mengoper dan menolaknya keluar dalam status sebagai string[object Object]
ErichBSchulz

15
@ErichBSchulz Meskipun tidak termasuk dalam jawaban ini, trik untuk membuat ini berfungsi adalah memasukkan nama parameter dalam string URL negara bagian dan menentukan jenisnya sebagai JSON. ex. $stateProvider.state('myState', { url: '/myState/{myParam:json}', params: {myParam: null},...Lihat catatan rilis 0.2.13 dan komentar kode untuk fitur ini.
Syon

1
Saya memiliki parameter id di URL saya dan harus menambahkannya ke objek params juga. { url: '/mystate/{id:[0-9]+}', params: { id: null, myParam: null }, ...
GraehamF

3
Pasti ada sihir hitam yang berperan - seluruh json saya menunjukkan url: (((
Kabachok

25

Ada dua bagian dari masalah ini

1) menggunakan parameter yang tidak akan mengubah url (menggunakan properti params):

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

2) melewatkan objek sebagai parameter: Nah, tidak ada cara langsung bagaimana melakukannya sekarang, karena setiap parameter diubah menjadi string ( EDIT : sejak 0.2.13, ini tidak lagi benar - Anda dapat menggunakan objek secara langsung), tetapi Anda dapat mengatasinya dengan membuat string sendiri

toParamsJson = JSON.stringify(toStateParams);

dan pada pengontrol target deserialisasi objek lagi

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

1
Sebenarnya untuk melewati objek ini adalah hack yang cukup bagus :)
Tek

kita dapat mengirimkan objek secara langsung. periksa jawaban yang diterima
Kishore Relangi

20

Sebenarnya Anda bisa melakukan ini.

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

Ini adalah dokumentasi resmi tentang opsi di state.go

Semuanya dijelaskan di sana dan seperti yang Anda lihat, inilah cara untuk melakukannya.


Saya mencoba kode yang tepat ini dan objeknya tidak disimpan.
Virmundi

1
Anda tidak dapat mengirimkan objek Anda hanya dapat mengirimkan nilai parameter tunggal .... Anda menjadikannya sebagai objek Anda harus meletakkan semua properti sebagai parameter url yang berbeda. Angular-ui-router devs masih bekerja untuk meneruskan seluruh objek. Sebenarnya orang-orang Svatopluk Ledl memberikan solusi yang bagus. Buat saja objek sebagai string json utuh dan setelah itu parsing. :)
Tek

13

Btw Anda juga dapat menggunakan atribut ui-sref di template Anda untuk mengirimkan objek

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

1
Bagaimana kami menerima objek ini di .state
Shubham

@Shubham Anda akan mengkonfigurasi 'params' untuk status yang akan menerima objek, kemudian menggunakan $ stateParams untuk mengambil objek tersebut. lihat doc angular-ui.github.io/ui-router/site/#/api/… untuk detailnya.
tao

ini berfungsi tetapi tidak dapat menyimpan data setelah halaman disegarkan.
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));


    })

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.