Как сохранить необязательный параметр состояния в браузере обратно в ui-router?

Я бы переместил определение params в родительское состояние, чтобы разделить необязательные параметры состояния между двумя вашими дочерними состояниями.

Дочерние состояния унаследуют $stateParams от вашего родителя, поэтому нет необходимости в реальном «обходном пути».

Просто добавьте $stateParams, как обычно, в ваши дочерние контроллеры, и вы получите полный доступ к передаваемым параметрам. Если вы не хотите использовать параметры в определенном дочернем состоянии, просто избегайте их внедрения.

Это работает с;

• Кнопка назад
• Кнопка «Вперед»
• ui-sref (без параметров (оставится как есть))
• ui-sref (с параметрами (будет перезаписан))

$stateProvider
  .state('parent', {
    params: { p1: null, p2: null }
  })
  .state('parent.childOne', {
    url: '/one',
    controller: function ($stateParams) {
      console.log($stateParams); // { p1: null, p2: null }
    }
  })
  .state('parent.childTwo', {
    url: '/two',
    controller: function ($stateParams) {
      console.log($stateParams); // { p1: null, p2: null }
    }
  })

Если вы в какой-то момент захотите очистить параметры во время путешествия по дереву состояний parent, вам придется сделать это вручную.

Это было бы единственным реальным предостережением, которое я вижу, используя это решение.

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

обновлен плункер

Одним из обходных решений является кэширование параметров состояния и их условная загрузка при переходе в состояние tabs.account. Конфигурация состояния маршрутизатора пользовательского интерфейса фактически позволяет вам предоставить обратный вызов onEnter для таких типов ситуаций «сделать что-нибудь при входе в состояние».

Вот основная логика использования localStorage в качестве кеша с рабочий плункер здесь:

• When you enter the tabs.account state, check for your state params
  • If you have them, cache them to local storage
  • Если нет, загрузите их из локального хранилища в $stateParams.

Вот пример фрагмента кода для справки (взято из Plunker):

  $stateProvider.state('tabs.account', {
    ...
    onEnter: ['$stateParams', '$window', function($stateParams, $window) {
      if($stateParams.param1) {
        $window.localStorage.setItem('tabs.account.param1', $stateParams.param1);
      } else {
        $stateParams.param1 = $window.localStorage.getItem('tabs.account.param1');
      }
      if($stateParams.param2) {
        $window.localStorage.setItem('tabs.account.param2', $stateParams.param2);
      } else {
        $stateParams.param2 = $window.localStorage.getItem('tabs.account.param2');
      }
    }],
    ...
  }

Одно предостережение заключается в том, что ваши параметры будут сохраняться на неопределенный срок (например, между обновлениями и сеансами). Чтобы обойти это, вы можете очистить кеш при загрузке приложения, как в app.run.

И последнее замечание: в Plunker я напрямую обращаюсь к локальному хранилищу (через службу Angular $window). Возможно, вы захотите использовать какой-нибудь модуль AngularJS — я использовал angular-local-storage в производство.

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

Кнопка «Назад» в браузере просто сохраняет историю URL. Он понятия не имеет о внутренних состояниях ui-router и просто заставит URL-адрес измениться.

Принудительное изменение URL-адреса вызовет внутреннюю машину ui-router, но, к сожалению, ui-router увидит изменение URL-адреса так же, как если бы кто-то изменил URL-адрес вручную.

Ui-router запустит новое изменение маршрута для маршрута, указанного URL-адресом. Это означает, что он не знает, что вы хотели вернуться «назад», и просто изменит состояние на новое без каких-либо параметров.

Сводка

Нажатие кнопки «Назад» приведет к изменению состояния на новое состояние в соответствии с URL-адресом вместо возврата к предыдущему состоянию.

Вот почему добавление параметров к URL-адресу решает проблему. Поскольку URL-адрес является дискриминационным, вы, наконец, попадете в желаемое состояние.

Надеюсь, это помогло.

Для меня это звучит как X Y проблема. Предлагаются способы сделать параметры состояния постоянными, тогда как проблема находится вне этой поверхности.

По определению вопроса есть данные, которые должны храниться независимо от состояний. Так что это что-то глобальное по отношению к состояниям. Таким образом, должна быть служба, которая хранит его, а контроллеры обоих состояний поддерживают его по мере необходимости. Просто не передавайте данные, выходящие за рамки одного состояния, в параметрах состояния.

Липкие состояния легко подходят для этого подхода, поскольку позволяют сохранять DOM и $scope, пока активно другое состояние. Но это не имеет ничего общего с параметрами состояния, когда состояние повторно активируется.