Пользовательский интерфейс 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.