Пользовательский интерфейс AngularJS передает данные между состояниями без URL


146

Я сталкиваюсь с этой проблемой передачи данных между двумя состояниями без раскрытия данных в URL, как будто пользователь не может напрямую попасть в это состояние.

Например. У меня есть два состояния "A" и "B". Я делаю какой-то серверный вызов в состоянии "A" и передаю ответ на вызов в состояние "B". Ответом на запрос сервера является строковое сообщение, которое довольно длинное, поэтому я не могу раскрыть его в URL.

Так есть ли способ в угловом UI-маршрутизаторе для передачи данных между состояниями, без использования URL-параметров?

Ответы:


185

Мы можем использовать params, новую особенность UI-маршрутизатор:

Справочник по API / ui.router.state / $ stateProvider

paramsКарта, которая дополнительно настраивает параметры, объявленные в URL, или определяет дополнительные не-url параметры. Для каждого настраиваемого параметра добавьте объект конфигурации, связанный с именем параметра.

Смотрите часть: " ... или определяет дополнительные не-url параметры ... "

Таким образом, состояние def будет:

$stateProvider
  .state('home', {
    url: "/home",
    templateUrl: 'tpl.html',
    params: { hiddenOne: null, }
  })

Несколько примеров из документа, упомянутого выше :

// define a parameter's default value
params: {
  param1: { value: "defaultValue" }
}
// shorthand default values
params: {
  param1: "defaultValue",
  param2: "param2Default"
}

// param will be array []
params: {
  param1: { array: true }
}

// handling the default value in url:
params: {
  param1: {
    value: "defaultId",
    squash: true
} }
// squash "defaultValue" to "~"
params: {
  param1: {
    value: "defaultValue",
    squash: "~"
  } }

EXTEND - рабочий пример: http://plnkr.co/edit/inFhDmP42AQyeUBmyIVl?p=info

Вот пример определения состояния:

 $stateProvider
  .state('home', {
      url: "/home",
      params : { veryLongParamHome: null, },
      ...
  })
  .state('parent', {
      url: "/parent",
      params : { veryLongParamParent: null, },
      ...
  })
  .state('parent.child', { 
      url: "/child",
      params : { veryLongParamChild: null, },
      ...
  })

Это может быть вызов с использованием ui-sref:

<a ui-sref="home({veryLongParamHome:'Home--f8d218ae-d998-4aa4-94ee-f27144a21238'
  })">home</a>

<a ui-sref="parent({ 
    veryLongParamParent:'Parent--2852f22c-dc85-41af-9064-d365bc4fc822'
  })">parent</a>

<a ui-sref="parent.child({
    veryLongParamParent:'Parent--0b2a585f-fcef-4462-b656-544e4575fca5',  
    veryLongParamChild:'Child--f8d218ae-d998-4aa4-94ee-f27144a61238'
  })">parent.child</a>

Проверьте пример здесь


Как и предполагалось, я пытался использовать params для вложенного состояния (пример - "/ user / profile / contacts", это дало мне ошибку. Нужно ли мне также определять "params" для родительского состояния?
— Виджай Тяги

Кажется, нет необходимости иметь родительский элемент для определения параметров, спасибо за подробный ответ.
— Виджай Тяги

Замечательно, если бы это помогло;) наслаждайтесь мощным UI-Router
— Radim Köhler

1
К сожалению, это не работает с ui-router 0.2.10, и это то, что я использую, получил эту ошибку при изменении версии на 0.2.10 - Ошибка: неверные параметры в состоянии «home»
— Виджай Тяги

1
@vijaytyagi, вы должны обновить. Просто нет причин продолжать использовать старую версию. И, насколько я помню, движение должно быть плавным ...
— Радим Келер

38

Объект params включен в $ stateParams, но не будет частью URL.

1) В конфигурации маршрута:

$stateProvider.state('edit_user', {
    url: '/users/:user_id/edit',
    templateUrl: 'views/editUser.html',
    controller: 'editUserCtrl',
    params: {
        paramOne: { objectProperty: "defaultValueOne" },  //default value
        paramTwo: "defaultValueTwo"
    }
});

2) В контроллере:

.controller('editUserCtrl', function ($stateParams, $scope) {       
    $scope.paramOne = $stateParams.paramOne;
    $scope.paramTwo = $stateParams.paramTwo;
});

3А) Изменение состояния с контроллера

$state.go("edit_user", {
    user_id: 1,                
    paramOne: { objectProperty: "test_not_default1" },
    paramTwo: "from controller"
});

3B) Изменение состояния в HTML

<div ui-sref="edit_user({ user_id: 3, paramOne: { objectProperty: 'from_html1' }, paramTwo: 'fromhtml2' })"></div>

Пример Плункер


1
Спасибо, отлично. Также заметил, что если вам нужны и $ state, и $ stateParams, вам нужно только ввести $ state. Объект stateParams является свойством $ state: $ state.params.
— Майкл К

1
Нужно сказать, что шаг 1 (с предоставлением значений по умолчанию) необходим для того, чтобы остальные работали ;-)
— Xtreme Biker

2
Спасибо за лаконичный пример. Работает для меня! (UI-Router v 1.0.3)
— Roboprog
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.