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.