Как передать объект в состояние с помощью 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

Может быть, использовать localStorage с URL-адресом в качестве ключа для ваших данных?
Нил

2
Откуда берутся ценности? Ui.router имеет концепцию «решения» для загрузки данных в область действия перед переходом в запрошенное состояние. Аналогично существуют методы onEnter и onExit. Кроме того, вы можете использовать локальное хранилище.
Джош С.

Как @JoshC. упомянуто, звучит так, как будто вы можете изучить разрешение данных перед переходом в состояние. github.com/angular-ui/ui-router/wiki#resolve
TrazeK 06

См. Ответ stackOverlord о том, как это сделать официально.
AlikElzin-kilaka 03

Ответы:


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

$ stateParams в 'foo' теперь равно {param1: 'bar', param2: 'baz', param3: {id: 35, name: 'what'}}

URL-адрес / foo / bar? param2 = baz.


Также работает с transitionTo.
AlikElzin-kilaka

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
У меня был параметр id в моем 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) передача объекта в качестве параметра: нет прямого способа, как это сделать сейчас, поскольку каждый параметр преобразуется в строку ( РЕДАКТИРОВАТЬ : начиная с версии 0.2.13 это больше не верно - вы можете использовать объекты напрямую), но вы можете обойти это, создав строку самостоятельно

toParamsJson = JSON.stringify(toStateParams);

и в целевом контроллере снова десериализуйте объект

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

1
Вообще-то, для передачи объектов это неплохой хак :)
Тек

мы можем передать объект напрямую. проверьте принятый ответ
Кишор Реланги

20

На самом деле вы можете это сделать.

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

Это официальная документация по опциям в state.go

Там все описано и, как видите, так и нужно делать.


Я попробовал именно этот код, но объект не сохранился.
Вирмунди

1
вы не можете передавать объекты, вы можете передавать только значения одного параметра .... чтобы сделать его объектом, вы должны поместить все свойства как разные параметры URL. Разработчики Angular-ui-router все еще работают над передачей всего объекта. Собственно, ребята, Svatopluk Ledl, дали хорошее решение. Просто сделайте объект как целую строку json и после этого проанализируйте его. :)
Тек

13

Кстати, вы также можете использовать атрибут ui-sref в своих шаблонах для передачи объектов

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

1
Как мы получаем этот объект в .state
Shubham

@Shubham вы должны настроить параметры для состояния, которое будет получать объект, а затем использовать $ stateParams для получения этого объекта. подробности см. в документе 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.