Angular ui-router: скрытые параметры и браузерная навигация

Question

Я работаю с AngularJS UI-Router для навигации в моем приложении. Я пытаюсь достичь чего-то немного «из коробки» с $stateParams в одном из моих состояний.

Объяснение

Государство - это вопрос, с несколькими вопросами подряд. Это определяется так:

$stateProvider
.state('myQuizz', {
   url:"/myQuizz/{title}",
   cache:false,
   params:{
     step: null
   },
   views: {
     'myQuizz-tab': {
       templateUrl: "myQuizz.html",
       controller: "myQuizzCtrl"
     }
   }
})

• Параметр title появляется в URL-адресе и определяет, какие опросы проводит пользователь. Например: myApp.com / myQuizz / history .
• Параметр step определяет, на каком этапе опроса находится пользователь (т.е. на какой вопрос, например, на вопрос 6 из 10). По умолчанию мой контроллер устанавливает его в 1, чтобы опрос начинался с первого вопроса.

Внутри контроллера Quizz происходит более или менее следующее:

$scope.submitAnswer = function(answer){
    if(isValid(answer, $stateParams.step)){ // If the answer was correct
        $stateParams.step = $stateParams.step + 1; // Increases step
        displayQuestion($stateParams.step); // Gets the next question in the quizz
    }
}

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

Что я пытаюсь сделать

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

• Пользователь находится в другом состоянии, скажем, в меню викторины. // state "menu"
• Пользователь открывает викторину. // state "myQuizz", step = 1, 1st question is displayed
• Они правильно отвечают на первый вопрос, контроллер обновляет $ stateParams.step и отображает второй вопрос. // step = 2, 2nd question is displayed
• Они хотят вернуться к первому вопросу, поэтому они нажимают кнопку «назад» в своем браузере. // step = 1, 1st question is displayed

Что происходит сейчас: когда они нажимают кнопку «назад», они переводятся в предыдущее состояние («меню»). Я подозреваю, что это потому, что когда $ stateParam.step обновляется, он не меняет URL (так как этот параметр скрыт).

Если бы $stateParams.step был нормальным параметром (не скрытым), он бы работал (я проверял). Но я не хочу, чтобы этот параметр появлялся в URL, вот где хитрость.

Мой вопрос

У меня вопрос: как включить навигацию в браузере, изменив только один скрытый $ stateParam в моем состоянии?

Что я пробовал до сих пор

• Я пытался добавить

  $state.go('myQuizz', {title: $stateParams.title, step: $stateParams.step+1});

  в моем контроллере, чтобы браузер считал, что я изменил состояние. Никакого успеха с этим.

• Я также пытался использовать $state.transitionTo, с тем же результатом.

• Наконец, я попытался обновить состояние с помощью $ state.reload (). Это не работает по двум причинам: он заново запускает тест на первый шаг и перезагружает все изображения (которые я предварительно загружаю в начале теста), так что это не будет удовлетворительным подходом.