Як передати об’єкт у стан за допомогою UI-роутера?


119

Я хотів би мати можливість перейти до стану та передати довільний об'єкт за допомогою ui-роутера.

Я знаю, що зазвичай $stateParamsвикористовується, але я вважаю, що це значення вставляється в URL-адресу, і я не хочу, щоб користувачі мали змогу робити закладки цих даних.

Я хотів би зробити щось подібне.

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

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

Чи можна це зробити без кодування значень в URL?


1
механізми ui-роутера зберігають стани URL-адрес у межах навігації. Таким чином, якщо користувач оновлює сторінку, він повертається на сторінку, на якій він був. Якщо ви не хочете використовувати цю поведінку, подумайте про використання інших механізмів (необроблені функції у вашому контролері / директивах тощо) та скористайтеся файлами cookie / сховище для зберігання тимчасових даних
Neozaru

Можливо, використовуєте localStorage з URL-адресою як ключовим для своїх даних?
Ніл

2
Звідки беруться значення? Ui.router має концепцію "рішення" для завантаження даних на область дії перед переходом у запитуваний стан. Аналогічно існують методи onEnter та onExit. Крім того, ви можете використовувати локальне сховище.
Джош К.

Як @JoshC. Згадане, звучить так, що ви, можливо, захочете вивчити вирішення даних, перш ніж перейти до стану. github.com/angular-ui/ui-router/wiki#resolve
TrazeK

Дивіться відповідь stackOverlord, як це зробити офіційно.
АлікЕльзін-кілака

Відповіді:


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/isissue/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: 'що'}});

$ stateParams у 'foo' тепер {param1: 'bar', param2: 'baz', param3: {id: 35, name: 'what'}}

url / foo / bar? param2 = baz.


Працює transitionToтакож.
АлікЕльзін-кілака

13
Я повинен робити щось не так: - / я на 0.2.13, але якщо я спробую передати та заперечую, він виходить у стан як рядок[object Object]
ErichBSchulz

15
@ErichBSchulz Хоча це не входить у цю відповідь, хитрість зробити цю роботу полягає в тому, щоб включити ім'я параметра в рядок URL-адреси штату та вказати тип як JSON. колишній $stateProvider.state('myState', { url: '/myState/{myParam:json}', params: {myParam: null},...Дивіться примітки до випуску 0.2.13 та коментарі до коду для цієї функції.
Syon

1
У мене в URL-адресі був параметр ідентифікатора, і я повинен був також додати його до об'єкта params. { url: '/mystate/{id:[0-9]+}', params: { id: null, myParam: null }, ...
GraehamF

3
Там повинен бути якийсь - то чорна магія в грі - вся моя JSON показує на URL - адреса: (((
Кабачок

25

Існує дві частини цієї проблеми

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

1
Насправді для передачі об’єктів це досить приємний злом :)
Tek

ми можемо передати об’єкт безпосередньо. перевірити прийняту відповідь
Kishore Relangi

20

Насправді ви можете це зробити.

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

Це офіційна документація щодо опцій у state.go

Там все описано, і, як ви бачите, це спосіб зробити.


Я спробував цей точний код, і об'єкт не зберігся.
Вірмунді

1
ви не можете передавати об'єкти, ви можете передавати лише окремі значення параметрів .... йо зробити це об'єктом, ви повинні розмістити всі властивості як різні параметри URL-адреси Кутові розробники углового маршрутизатора все ще працюють над передачею всього об’єкта. Власне, хлопці Сватоплук Ледл дали гарне рішення. Просто зробіть об’єкт як цілу рядок json і після цього розберіть його. :)
Tek

13

До речі, ви також можете використовувати атрибут ui-sref у своїх шаблонах для передачі об'єктів

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

1
Як ми отримуємо цей об’єкт у .state
Shubham

@Shubham ви б налаштували 'params' для стану, який отримає об’єкт, а потім використовуючи $ stateParams для отримання цього об'єкта. детальніше див. doc angular-ui.github.io/ui-router/site/#/api/… .
дао

це працює, але не може зберігати дані після оновлення сторінки.
дао

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


    })

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.