UI yönlendirici kullanarak bir nesne bir duruma nasıl geçirilir?


119

Bir duruma geçiş yapabilmek ve ui-yönlendirici kullanarak rastgele bir nesneye geçmek istiyorum.

Genellikle $stateParamskullanıldığının farkındayım , ancak bu değerin URL'ye eklendiğine inanıyorum ve kullanıcıların bu verilere yer işareti koymasını istemiyorum.

Böyle bir şey yapmak isterim.

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

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

URL'ye değerleri kodlamadan bunu yapmanın bir yolu var mı?


1
ui yönlendirici mekanizmaları, gezinme boyunca URL durumlarını korur. Bu nedenle, bir kullanıcı sayfayı yenilediğinde, bulunduğu sayfaya geri döner. Bu davranışı kullanmak istemiyorsanız, diğer mekanizmaları (denetleyicinizdeki / yönergelerinizdeki ham işlevler, vb.) Kullanmayı düşünün ve çerezleri / geçici verileri depolamak için depolama
Neozaru

Verileriniz için anahtar olarak url ile localStorage kullanın belki?
Neil

2
Değerler nereden geliyor? Ui.router, istenen duruma geçmeden önce bir kapsama veri yüklemek için bir "çözümleme" kavramına sahiptir. Benzer şekilde onEnter ve onExit yöntemleri vardır. Ek olarak, yerel depolamayı da kullanabilirsiniz.
Josh C.

@JoshC olarak. söz konusu olduğunda, bir duruma geçmeden önce verileri çözümlemeye bakmak isteyebileceğiniz gibi görünüyor. github.com/angular-ui/ui-router/wiki#resolve
TrazeK

Resmen nasıl yapılacağı konusunda stackOverlord'un cevabına bakın.
AlikElzin-kilaka

Yanıtlar:


163

0.2.13 sürümünde, nesneleri $ state.go'ya geçirebilmelisiniz,

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

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

ve ardından denetleyicinizdeki parametreye erişin.

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

myParam URL’de görünmeyecektir.

Kaynak:

Kolaylık sağlamak için burada çoğaltılan christopherthielen https://github.com/angular-ui/ui-router/issues/983 tarafından yapılan yoruma bakın :

christopherthielen: Evet, bu şimdi 0.2.13'te çalışıyor olmalı.

.state ('foo', {url: '/ foo /: param1? param2', parametreler: {param3: null} // boş varsayılan değerdir});

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

"foo" içindeki $ stateParams artık {param1: "bar", param2: "baz", param3: {id: 35, ad: "ne"}} oldu

url / foo / bar? param2 = baz.


İle transitionTode çalışır.
AlikElzin-kilaka

13
Yanlış bir şey yapıyor olmalıyım: - / 0.2.13'teyim ama geçmeye ve itiraz etmeye çalışırsam durum dize olarak çıkar[object Object]
ErichBSchulz

15
@ErichBSchulz Bu yanıta dahil edilmemiş olsa da, bu işi yapmanın püf noktası, eyaletin URL dizesine parametre adını eklemek ve türü JSON olarak belirtmektir. ex. $stateProvider.state('myState', { url: '/myState/{myParam:json}', params: {myParam: null},...Bkz 0.2.13 sürüm notlarını ve bu özellik için kod yorumlar.
Syon

1
URL'mde bir id parametresi vardı ve bunu da params nesnesine eklemem gerekiyordu. { url: '/mystate/{id:[0-9]+}', params: { id: null, myParam: null }, ...
GraehamF

3
Oyunda biraz kara büyü olmalı - tüm
jsonum

25

Bu sorunun iki kısmı var

1) bir url'yi değiştirmeyecek bir parametre kullanmak (params özelliğini kullanarak):

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

2) bir nesneyi parametre olarak iletmek: Her parametre dizeye dönüştürüldüğünden , şimdi nasıl yapılacağının doğrudan bir yolu yoktur ( EDIT : 0.2.13'ten beri bu artık doğru değildir - nesneleri doğrudan kullanabilirsiniz), ancak dizeyi kendi başınıza oluşturarak geçici olarak çözebilirsiniz.

toParamsJson = JSON.stringify(toStateParams);

ve hedef denetleyicide nesnenin serisini yeniden kaldır

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

1
Aslında nesneleri geçmek için oldukça güzel bir hack :)
Tek

doğrudan nesneyi geçebiliriz. kabul edilen cevabı kontrol et
Kishore Relangi

20

Aslında bunu yapabilirsiniz.

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

Bu, state.go'daki seçenekler hakkındaki resmi belgedir.

Orada her şey anlatılıyor ve gördüğünüz gibi yapılacak yol bu.


Bu tam kodu denedim ve nesne korunmadı.
Virmundi

1
nesneleri geçiremezsiniz sadece tek parametreli değerleri iletebilirsiniz .... bunu bir nesne olarak yaparsanız, tüm özellikleri farklı url parametreleri olarak koymanız gerekir. Açısal-ui-yönlendirici geliştiricileri hala tüm nesneyi geçirmeye çalışıyor. Aslında Svatopluk Ledl adamlarına güzel bir çözüm verdi. Sadece nesneyi bir json dizesi olarak yapın ve bundan sonra onu ayrıştırın. :)
Tek

13

Btw, nesneleri iletmek için şablonlarınızdaki ui-sref niteliğini de kullanabilirsiniz.

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

1
Bu nesneyi .state içinde nasıl alırız
Shubham

@Shubham, nesneyi alacak durum için 'params'ı yapılandırırsınız, ardından bu nesneyi almak için $ stateParams'ı kullanırsınız. doc bkz angular-ui.github.io/ui-router/site/#/api/... ayrıntı için.
tao

bu çalışır ancak sayfa yenilendikten sonra verileri koruyamaz.
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));


    })

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.